js 高德地图根据后台坐标绘制轨迹

来源:互联网 发布:oncity中山网络社区 编辑:程序博客网 时间:2024/06/08 07:07

项目为快递管理系统,要求有两种物流跟踪方式,一种为时间轴,一种为地图方式。

时间轴完成了,地图由于Android那边的大兄弟没能存入坐标没能搞出来也是很气啦

后期调试完成会再修改

<script type="text/javascript">
    
        //这里可以传入后台的json数据,类似此格式
        var pointList=[
          {
          
        lng:116.397428,
          lat:39.90923

          
          },

        {
        
          lng:116.397428,
          lat:39.90923

          
        

          
          },
        
        {
        
          lng:116.397428,
          lat:39.90923

          
          },
            {
        
          lng:116.397428,
          lat:39.90923

          
          }
        
      
      ];
        

        var a_mark;    //图标点
        var marker; 
        var lineArr;
        map = new AMap.Map("map_container", {
          resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 14
        });
        map.plugin(["AMap.ToolBar"],function(){
            //加载工具条
            var tool = new AMap.ToolBar();
            map.addControl(tool);   
            });
       
        //地图图块加载完毕后执行函数  
 function completeEventHandler(x,y){
    
    marker3 = new AMap.Marker({  
        map:map,  
        //draggable:true, //是否可拖动  
        position:new AMap.LngLat(x,y),//基点位置  
        icon:"http://code.mapabc.com/images/car_03.png", //marker图标,直接传递地址url  
        offset:new AMap.Pixel(-26,-13), //相对于基点的位置  
        autoRotation:true  
    });        
    var lngX ;  
    var latY ;         
    lineArr = new Array();   

     for(var i = 1;i<pointList.length;i++){
        lngX = pointList[i].lng;
        latY = pointList[i].lat;
        lineArr.push(new AMap.LngLat(lngX,latY));
     }

 
    //绘制轨迹  
    var polyline = new AMap.Polyline({  
        map:map,  
        path:lineArr,  
        strokeColor:"#00A",//线颜色  
        strokeOpacity:1,//线透明度  
        strokeWeight:3,//线宽  
        strokeStyle:"solid",//线样式  
    });  
}  
function startRun(){  //开始绘制轨迹
    x=pointList[0].lng;
    y=pointList[0].lat
    completeEventHandler(x,y);
    marker.moveAlong(lineArr,80);     //开始轨迹回放
}
function init(){
        
       /*    $.ajax({
                type: "post",
                 url: _gPath+"你的数据.json",

                success: function(resp){
                    
                    $.each(resp, function(i,n){
                     
                        pointList = resp.data;

                  });
                }
        }); */

          
           startRun();  
      }      
      $(document).ready(function(){
       init();
      
      });

    </script>

原创粉丝点击