引入下面三个js文件
<script src="http://webapi.amap.com/maps?v=1.4.6&key=你所申请的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script anguage="javascript" src="https://webapi.amap.com/maps?key=你所申请的key值"&v=1.4.7&plugin=AMap.GraspRoad"></script>
js:
//地图操作
var marker, map = new AMap.Map("container", {
resizeEnable: true,
});
//起终点坐标
var statrLon="";
var statrLat="";
var endLon="";
var endLat="";
//需要绘制的点坐标数组
var pathParam=[];
$.ajax({
url: JM.apiSite + "/admin/networkCar/getOrderRunTrack.json",
crossDomain: true,
async: true,
type: "post",
data: {
"access_token": accessToken,
"orderId": result.id
},
success: function(json) {
$(".gdMap").show();
console.log(json);
var e=json.info;
for(var i=0;i<e.length;i++){
var arrObj={};
//保存开始和结束时经纬度
if(i==0){
statrLat=e[i].lat;
statrLon=e[i].lon;
arrObj.tm=1478031031;
}else if(i==e.length-1){
endLat=e[i].lat;
endLon=e[i].lon;
arrObj.tm=i;
}else{
arrObj.tm=i;
}
arrObj.x=e[i].lon;
arrObj.y=e[i].lat;
arrObj.sp=10;
arrObj.ag=30;
pathParam.push(arrObj);
}
//官方方法
var path1 = [];
for(var i=0;i<pathParam.length;i+=1){
path1.push([pathParam[i].x,pathParam[i].y])
}
new AMap.GraspRoad().driving(pathParam,function(error,result){
if(!error){
var path2 = [];
var newPath = result.data.points;
for(var i =0;i<newPath.length;i+=1){
path2.push([newPath[i].x,newPath[i].y])
}
var newLine = new AMap.Polyline({
path:path2,
strokeWeight:8,
strokeOpacity:0.7,
strokeColor:'green'
})
map.add(newLine)
map.setFitView()
}
})
//添加多个点标记
var marker1 = new AMap.Marker({
position: new AMap.LngLat(endLon, endLat),
icon: "http://webapi.amap.com/theme/v1.3/markers/n/end.png",
});
var marker2 = new AMap.Marker({
position: new AMap.LngLat(statrLon, statrLat),
icon: "http://webapi.amap.com/theme/v1.3/markers/n/start.png",
});
var markerList = [marker1, marker2];
map.add(markerList);
}
});
js高德地图绘制路线并轨迹纠偏
于 2018-07-24 11:24:50 首次发布