高德地图轨迹及进阶交互

高德地图轨迹及进阶交互

如图为基本的轨迹：

基本轨迹点点击之后（1.该点高亮，2.左侧自动找到对应的点加上蒙版表示选中，3.右侧信息框浮现）：

关闭右侧信息框（高亮没有，左侧蒙版消失）：

点击左侧轨迹列表（1.找到轨迹图中的该点进行高亮，2.同时右侧信息框浮现）：

注：轨迹点和轨迹线可以根据不同的数组来绘制（出现情况：一个地方出现多个轨迹点的时候，如果直接按未去重的数组绘制，则会在同一个地方绘制多个图形。轨迹线，可以按未去重的数组来绘制，因为重叠了就相当于没走过。）

轨迹线，轨迹点等都已组件化，直接传参便可使用，如样式不同，则更改样式即可

重点提示，高德地图点击事件不会携带该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
      })

参考地址：https://www.cnblogs.com/xiaomg/articles/10432907.html

demo地址：https://github.com/rui-rui-an/gaode-interactive-demo