Web在高德地图中根据经纬度坐标点集合画轨迹线

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>关键字查询-使用默认皮肤</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0"/>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.4.15&key=<你的key>"></script>
    <style type="text/css">
        #panel {
            position: absolute;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
    </style>
</head>
<body>
<div id="mapContainer"></div>
</div>
<script type="text/javascript">
    // var lineArr2=[
    //         [118.626495,32.05714],
    //         [118.626785,32.057396],
    //         [118.626892,32.057491],
    //         [118.62735,32.057919],
    //         [118.627472,32.058029],
    //         [118.627556,32.058102],
    //         [118.627808,32.058334],
    //         [118.628204,32.058693],
    //         [118.62896,32.059357],
    //         [118.629112,32.059509],
    //         [118.629295,32.059666]
    //     ];
    var lineArr = new Array();
    var lineArr2 = new Array();
    var lineStr = "118.626495,32.05714;118.626785,32.057396;118.626892,32.057491;118.62735,32.057919;118.627472,32.058029;118.627556,32.058102;118.627808,32.058334;118.628204,32.058693;118.62896,32.059357;118.629112,32.059509;118.629295,32.059666;118.629402,32.05975;118.629501,32.05983;118.629837,32.060143;118.629837,32.060204;118.630028,32.060368;118.630142,32.060471;118.630363,32.060677;118.630371,32.060688;118.630737,32.061008;118.630852,32.061108;118.630989,32.061226;118.631119,32.061359;118.631271,32.061485;118.631645,32.061813;118.63192,32.062057;118.63237,32.062454;118.632515,32.062572;118.632607,32.062645;118.632896,32.062885;118.632988,32.062965;118.633209,32.063141;118.633781,32.06358;118.634094,32.063835;118.634216,32.063919;118.634514,32.064144;118.634811,32.064362;118.634811,32.064362;118.63501,32.064419;118.635162,32.064423;118.6353,32.064396;118.635414,32.064358;118.635788,32.064137;118.635788,32.064137;118.635651,32.063931;118.635597,32.063915;118.635201,32.064106";
    //var lineStr = "118.6267142,32.05745306;118.62683,32.05754639;118.62683,32.05754639;118.6273253,32.05798694;118.7961614,32.04856111;118.7965492,32.04848889;118.7968619,32.04842972;118.7969667,32.04841083;118.7971778,32.04831306";
    for(var i =0; i<lineStr.split(';').length;i++){
            lineArr[i] = lineStr.split(';')[i];
            console.log(lineArr[i]);
            console.log(lineArr[i].split(',').length);
            lineArr2[i] = new Array();
           for(var j=0;j<lineArr[i].split(',').length;j++){
            lineArr2[i][j] = lineArr[i].split(',')[j];

           }
    }
    

   
    var map = new AMap.Map("mapContainer", {
        resizeEnable: true,
        center:[118.626502,32.057143], 
        //center:[114.298479,30.546959], 
        zoom:13
    });

    var polyline = new AMap.Polyline({
        path:lineArr2,
        strokeColor:'#FF33FF',
        strokeOpacity:1,
        strokeWeight:2,
        strokeStyle:'solid',
        strokeDasharray:[10,5],
        geodesic:true

    });

    polyline.setMap(map);

</script>
<script>


</script>
轨迹.png
最后编辑于：2020.01.10 16:48:43