高德地图轨迹及基本交互
如图为基本的轨迹:
基本轨迹点点击之后:
注:轨迹点和轨迹线可以根据不同的数组来绘制(出现情况:一个地方出现多个轨迹点的时候,如果直接按未去重的数组绘制,则会在同一个地方绘制多个图形(有问题)。轨迹线,可以按未去重的数组来绘制,因为重叠了就相当于没走过。)
轨迹线,轨迹点等都已组件化,直接传参便可使用,如样式不同,则更改样式即可
重点提示,高德地图点击事件不会携带该item的信息,需要自己额外添加extData,然后使用点击事件中的e.target.getExtData()来获取该item的信息。
代码:
const overlay = new AMap.Marker({
offset: new AMap.Pixel(-16, -34),
position: location,
content: `<div class="${cls} icon-router-marker"></div>`,
title: title,
extData: {
...item
}
})
overlay.on('click', e => {
// https://www.cnblogs.com/xiaomg/articles/10432907.html
let Cotent = JSON.parse(JSON.stringify(e.target.getExtData()));
// console.log(Cotent);
this.$emit('elementClick', Cotent)
this.content = curCotent
this.MapPopupData.show = true
this.MapPopupData.position = location
})