高德地圖-軌跡回放（二）

 　　利用高德地圖作軌跡回放的另一種方法是利用官方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繪制地圖，並實現軌跡回放的主要方式，以此總結