标签: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