码迷,mamicode.com
首页 > 其他好文 > 详细

高德地图-轨迹回放(二)

时间:2017-10-19 19:58:10      阅读:810      评论:0      收藏:0      [点我收藏+]

标签:style   rtp   set   webapi   1.3   方法   position   轨迹回放   new   

   利用高德地图作轨迹回放的另一种方法是利用官方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绘制地图,并实现轨迹回放的主要方式,以此总结

高德地图-轨迹回放(二)

标签:style   rtp   set   webapi   1.3   方法   position   轨迹回放   new   

原文地址:http://www.cnblogs.com/xiaoshudian/p/7694084.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!