Vue - 高德地图添加覆盖物，及覆盖物的点击方法

<template>
  <div class="wrap">
    <div id="map"></div>
  </div>
</template>

<script>
let map = null;
export default {
  data() {
    return {
      lineData: [
        {
          path: [
            [118.715995, 32.0219131],
            [118.735995, 32.0219131],
          ],
          content: "第一个线路",
        },
        {
          path: [
            [118.745995, 32.1219131],
            [118.745995, 32.0219131],
          ],
          content: "第二个线路",
        },
      ],
      markerData: [
        {
          position: [118.715995, 32.0319131],
          content: "第一个点标记",
        },
        {
          position: [118.715995, 32.0419131],
          content: "第二个点标记",
        },
      ],
    };
  },
  mounted() {
    this.getMap();
  },
  methods: {
    getMap() {
      map = new AMap.Map("map", {
        mapStyle: "amap://styles/fresh", //设置地图的显示样式
        zoom: 13, //设置地图显示的缩放级别
        center: [118.735995, 32.0219131], //设置地图中心点坐标
      });
      /**
       * 地图上画线
       */
      this.lineData.forEach((item) => {
        let path = item.path;
        let lineContent = '<div class="info">' + item.content + "</div>";
        // 创建折线实例
        var polyline = new AMap.Polyline({
          path: path,
          borderWeight: 2, // 线条宽度，默认为 1
          strokeColor: "red", // 线条颜色
          lineJoin: "round", // 折线拐点连接处样式
        });
        // 将折线添加至地图实例
        polyline.setMap(map);
        //点击地图线要素的方法
        polyline.on("click", polylineClick);
        function polylineClick(e) {
          console.log(item.content + "点击成功！");
          let infoWindow = new AMap.InfoWindow({
            content: lineContent,
            offset: new AMap.Pixel(0, -30),
          });
          infoWindow.open(map, [e.lnglat.lng, e.lnglat.lat]);
        }
      });
      /**
       * 地图上画点
       */
      this.markerData.forEach((item) => {
        var marker = new AMap.Marker({
          //   icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
          position: item.position, // 基点位置
          offset: new AMap.Pixel(-10, -32), // 相对于基点的偏移位置
        });
        marker.setMap(map);
        let markerContent = '<div class="info">' + item.content + "</div>";
        //点击地图点标记的方法
        marker.on("click", function (e) {
          console.log(item.content + "点击成功！");
          let infoWindow = new AMap.InfoWindow({
            content: markerContent,
            offset: new AMap.Pixel(0, -30),
          });
          infoWindow.open(map, e.target.getPosition());
        });
      });
    },
  },
};
</script>

<style scoped>
#map {
  width: 1080px;
  height: 750px;
}
</style>

转载于：https://blog.csdn.net/Jie_1997/article/details/108776383