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

阳光穿透心脏的1/2处 2021-07-25 19:28 1394阅读 0赞

<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>