高德地图绘制实时轨迹 实现动态轨迹跟踪
1、创建高德基础地图
//创建地图
var map = new AMap.Map('container', {
resizeEnable: true,
zoom: 13,
center: []
})
2、创建图标和其他全局变量
//汽车图标
const icon = new AMap.Icon({
size: new AMap.Size(45, 45),
image: '/images/map/car.png',
imageSize: new AMap.Size(32, 32),
});
//轨迹位置数组
var lineArr=[]
//创建线条绘制
const polyline=new AMap.Polyline({
path:[],
strokeColor:'green',
strokeWeight:5
})
polyline.setMap(map)
3、获取历史轨迹
//从后台获取历史轨迹数组
$.post('',{},function(res){
lineArr.push(res.data.data)
})
4、循环抓取车辆位置
4.1 API主动获取,一秒一次几乎是极限了。
4.2 Websocket连接,不间断连接有数据即更新,车辆图标移动更流畅。
将获取到的经纬度同样PUSH到轨迹数组