Vue中使用高德地图实现单人实时轨迹(方式一)--点标记方式闪动
#Vue中使用高德地图实现单人实时轨迹(方式一)思路:要想实现人员实时效果那么第一种简单的思路就是,点标记的一闪一闪效果,用轮询或者webscoket不断从后台获取坐标数据,清理点标记,在绘制点标记。如果你还不知道如何引入和配置高德地图请参考本人博客:https://lbs.amap.com/api/javascript-api/example/marker/replaying-histori..
·
#Vue中使用高德地图实现单人实时轨迹(方式一)
思路:要想实现人员实时效果那么第一种简单的思路就是,点标记的一闪一闪效果,用轮询或者webscoket不断从后台获取坐标数据,清理点标记,在绘制点标记。
如果你还不知道如何引入和配置高德地图请参考本人博客:https://lbs.amap.com/api/javascript-api/example/marker/replaying-historical-running-data
data中的数据
h3tit: "人员轨迹",
timer: null,//单人定时
manyTime:null,//多人实时
markerSpeed: 200,
speedCount: 1,
pName:'---',
lineArr: [
[116.478935, 39.997761],
[116.478939, 39.997825],
[116.478912, 39.998549],
[116.478912, 39.998549],
[116.478998, 39.998555],
[116.478998, 39.998555],
[116.479282, 39.99856],
[116.479658, 39.998528]
],
marker: {},
map: {},
markers:[],//点的集合 用来清除点标记
firstArr: [120.11296645567579, 30.290059843858472],
polyline: {},
passedPolyline: {},
methods中的方法:
首先 发送请求给后端得到数据,用轮询的方法获取实时数据调用this.addPositiionSingle(val)
//添加点标记
addPositiionSingle(data) {
this.marker = new AMap.Marker({
map: this.map,
position: [Number(data.lng), Number(data.lat)],
icon: pic,
offset: new AMap.Pixel(0, 0),
});
this.marker.setTitle(`${data.person_name}`);
this.marker.setLabel({
offset: new AMap.Pixel(50, 0), //设置文本标注偏移量
content: `<div class='info'>${data.person_name}</div>`, //设置文本标注内容
direction: "top" //设置文本标注方位
});
this.marker.setMap(this.map);
},
**其次:**在每次请求的成功之后清除点标记,然后在绘制点标记
//移出点标记
removemarker() {
if (this.marker) {
this.marker.setMap(null);
this.marker = null;
}
},
**最后:**别忘了清除定时
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
更多推荐
已为社区贡献14条内容
所有评论(0)