<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #container { width: 800px; height: 600px; } </style> <body> <div id="container" tabindex="0"></div> <div id="lnglat" tabindex="0"></div> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的KEY值(請在高德官網註冊獲取)"></script> <script type="text/javascript"> var map = new AMap.Map('container', { resizeEnable: true, zoom: 10, center: [116.398258, 39.904600] }); var lineArr = [ [116.22797, 39.988826], [116.214237, 39.948831], [116.207371, 39.92356], [116.207371, 39.88142], [116.24033, 39.839254], [116.263675, 39.803392], [116.318607, 39.781233], [116.414737, 39.785454], [116.472416, 39.797062], [116.531467, 39.819216], [116.554813, 39.86034], [116.55756, 39.905653], [116.54108, 39.938303], [116.525974, 39.982512], [116.472416, 40.002503], [116.414737, 40.01197], [116.358433, 40.01197],[116.270542, 40.00671], [116.234836, 39.995139],[116.22797, 39.988826], [116.214237, 39.948831] ]; var polyline = new AMap.Polyline({ path: lineArr, //設置線覆蓋物路徑 strokeColor: "#FF00FF", //線顏色 strokeOpacity: 2, //線透明度 strokeWeight: 5, //線寬 strokeStyle: "solid", //線樣式 strokeDasharray: [10, 5] //補充線樣式 }); polyline.setMap(map); function getLnglat(e) { map.clearMap();//獲取位置以前清除以前的座標 var x = e.lnglat.getLng();//經度 var y = e.lnglat.getLat();//緯度 document.getElementById("lnglat").innerHTML += "[" + x + "," + y + "],"; } AMap.event.addListener(map, 'click', getLnglat); //點擊事件 </script> </body> </html>
結果:javascript