高德地图-轨迹回放

Posted 2020-10-11 会数数的小数点

 　　利用高德地图作轨迹回放的另一种方法是利用官方api覆盖物中的AMap.Polyline来做，官方给出的例子中也是此原理实现的。
实现地图轨迹的主要函数如下

function track(){
        
         map.clearMap();//先清空地图
         $(‘.pos .posDesc‘).empty();
     
    $.getJSON(‘track.json‘,function(data){//这是获取数据

                var arr1=[];
                var arr=[];
                 var startPot = [];
                 var endPot = [];
                for(var i=0;i<data.gps.length;i++){
                    var dt = data.gps[i].dTime;
                
                    
                    if(diff(dt,$st.val())>=0&&diff(dt,$et.val())<=0){
                          
                         arr1 = GPS.gcj_encrypt(data.gps[i].latY,data.gps[i].lngX);//坐标转换，消除坐标误差
                    
                        arr.push([arr1.lon,arr1.lat]);
                         
                         }    
                    
                }
            
                startPot = arr[0];
                endPot = arr[arr.length-1];


                var  marker=  new AMap.Marker({
         map: map,
         position: startPot,
         icon: "http://webapi.amap.com/images/car.png",//代表人物的图标
         offset: new AMap.Pixel(-26,-13),
         autoRotation: true//自动转弯（ie8及以下不支持）
         
     });//添加起点标志
      

     //绘制路线（利用官方的api，根据坐标绘制路线）
    
     var polyline = new AMap.Polyline({
         map: map,
         path: arr,
         strokeColor: "#9F9F5F",
         strokeWeight:6,
         lineJoin:"round"

     });
    //走过路线的样式
     var passedPolyline = new AMap.Polyline({
         map:map,
         strokeColor:"#006BB1 ",
         strokeWeight:6,
         isOutline:true,
         outlineColor:‘#fff‘,
         showDir:true,
         lineJoin:"round"
     });
    //设置移动过的路线
     marker.on(‘moving‘,function(e){
         passedPolyline.setPath(e.passedPath);
     });
    //视野居中
     map.setFitView();
    
     AMap.event.addDomListener(start,‘click‘,function(){
         marker.moveAlong(arr,speed.value);//设置移动路线及速度
         
     },false);

     AMap.event.addDomListener(pause,‘click‘,function(){
         marker.pauseMove();//暂停运动
     
     },false);

     AMap.event.addDomListener(resume,‘click‘,function(){
         marker.resumeMove();//继续运动
     },false);

     AMap.event.addDomListener(stop,‘click‘,function(){
         marker.stopMove();//停止运动
         map.clearMap();
     },false);

 
          
      var stmarker = new AMap.Marker({
            map: map,
            position: startPot, //基点位置（起点）
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
            zIndex: 10
        });
        var endmarker = new AMap.Marker({
            map: map,
            position: endPot, //基点位置（终点）
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
            zIndex: 10
        });
    
    });    
    
}

以上就是利用高德地图的AMap.Polyline绘制地图，并实现轨迹回放的主要方式，以此总结