代码实现:
//通过geojson对象来管理覆盖物,显示点
geojson.addOverlay(marker)
//保存数据(将geojson对象转换成标准的GeoJSON格式对象)
saveData(geojson.toGeoJSON())
})
//从localstroage中读取数据
function getData(){
if(!localStorage.getItem('geojson')){
localStorage.setItem('geojson','[]')
}
return JSON.parse(localStorage.getItem('geojson'))
}
//从localstoragr中写数据
function saveData(data){
localStorage.setItem('geojson',JSON.stringify(data))
}
function startAnimation(){
//console.log(1)
//实现路径规划
AMap.plugin('AMap.Driving',function(){
var driving =new AMap.Driving({
map:map,
//驾车策略
policy:AMap.DrivingPolicy.LEAST_TIME,
})
//设置起点和终点
var start = new AMap.LngLat()//填写自己学校的坐标起点
var end = new AMap.LngLat()//填写自己学校的坐标终点
//通过geojson得到每一个点的坐标
var opts ={
waypoints:[],
}
geojson.eachOverlay(function(item){
opts.waypoints.push(item.getPosition())
})
driving.search(start,end,opts,function(status,result){
if(status=='complete'){
console.log('success')
//实现模拟
var lineArr =[]
result.routes[0].steps.forEach(function(item){
lineArr.push(...item.path)
})
var marker = new AMap.Marker({
map:map,
position:start,
icon:'https://webapi.amap.com/images/car.png',
offset:new AMap.Pixel(-26,-13),
autoRotation:true,
angle:-90,
})
var passedPolyline = new AMap.Polyline({
map:map,
strokeColor:'#AF5',//线的颜色
storkeWeight:6,//线宽
})
marker.on('moving',function(e){
passedPolyline.setPath(e.passedPath)
})
map.setFitView()
marker.moveAlong(lineArr,{
duration:500,
autoRotation:true,
})
}
else{
console.log('error')
}
})
})
}
注意:此段为调用高德API 的script代码,其中坐标需填写自己所需的,可使用坐标拾取器获得