高德地圖軌跡座標

<!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

相關文章
相關標籤/搜索