绘制高德地图边界并且添加点位点击出现弹窗，关闭弹窗，以及鼠标移入移出点位事件，移除点位

 <div id="map" class="map" ref="map" style="width:100%;height:100%"></div>

data{
 	  popoverMarker: null,
      zhandianList: [
        {
          companyName: "金家岭街道",
          time: "2023-07-10",
          geneQty: 20,
          disposeRate: 10,
          dispose: 78,
          lat: 36.18,
          lon: 120.62,
        },
        {
          companyName: "北宅街道",
          time: "2023-07-10",
          geneQty: 10,
          disposeRate: 20,
          dispose: 45,
          lat: 36.11,
          lon: 120.47,
        },
      ],
      myMap: null,
      markers:[],
	 }

 created() {
     //标注文字上的点击事件
    window.aa = () => {
      console.log("点击关闭");
      this.popoverMarker.hide();
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.creatMap();
    });
  },

 // 获取点位数据
    getPosition(query) {
      this.addMarker(this.zhandianList);
    },
 // 地图
    creatMap() {
      let that = this;
      this.myMap = new AMap.Map("map", {
        center: [120.55, 36.19], //东西经，南北纬
        // mapStyle: "amap://styles/30a69840de521825d1c73041ed88fbb6",
        zoom: 11,
        resizeEnable: true,
      });
      //获取边界坐标点
      AMap.plugin("AMap.DistrictSearch", () => {
        var districtSearch = new AMap.DistrictSearch({
          // 关键字对应的行政区级别，共有5种级别
          level: "district",
          //  是否显示下级行政区级数，1表示返回下一级行政区
          subdistrict: 0,
          // 返回行政区边界坐标点
          extensions: "all",
        });
        // 搜索所有省/直辖市信息
        districtSearch.search("崂山区", (status, result) => {
          // 查询成功时，result即为对应的行政区信息
          console.log("打印result：", result);
        });
        that.drawBounds();
      });
    },
    // 绘制区域图
    drawBounds() {
      var district = null;
      var polygons = [];
      let that = this;
      //加载行政区划插件
      if (!district) {
        //实例化DistrictSearch
        var opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "district", //查询行政级别为 市
        };
        district = new AMap.DistrictSearch(opts);
      }
      //行政区查询
      district.search("崂山区", function (status, result) {
        polygons = [];
        var bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            var polygon = new AMap.Polygon({
              strokeWeight: 3,
              path: bounds[i],
              fillOpacity: 0.4,
              fillColor: "#80d8ff", //区域的颜色
              strokeColor: "#a3b1c0", //描边的颜色
            });
            polygons.push(polygon);
          }
        }
        that.myMap.add(polygons);
        // that.myMap.setFitView(polygons); //视口自适应
      });
    },
    addMarker(dian) {
      // console.log("打点：", dian);
      let that = this;
      let marker;
      let icon = require("@/assets/images/productionWaste.png");
      dian.forEach((item) => {
        console.log("aaa", item);
        marker = new AMap.Marker({
          icon,
          size: new AMap.Size(29, 30),
          imgSize: new AMap.Size(29, 30),
          position: [item.lon, item.lat],
          textContent: item,
          offset: new AMap.Pixel(-10, -20),
        });
        marker.setMap(that.myMap);
        that.markers.push(marker);
        marker.on("click", function (e) {
          let arr = [];
          that.infor = e.target._originOpts.textContent;
          const position = [that.infor.lng, that.infor.lat + 0.04];
          that.myMap.setCenter(position); //设置地图中心
          let contentText = `<div style="display:flex;flex-direction: column; align-items: center;">
            <div class="popover-box">
              <div class = "popover-title"><div class="popover-title-name"><div class="line"></div>第一化工厂</div><div id="close" οnclick="aa()">x</div></div>
              <div class="popover-info">
                <div class="popover-info-item">数据时间：<span class="popover-info-item-data">${
                  item.time ? item.time : ""
                }</span></div>
                <div class="popover-info-item">固废产生量：<span class="popover-info-item-data">${
                  item.geneQty ? item.geneQty : ""
                }</span></div>
                <div class="popover-info-item">综合利用量：<span class="popover-info-item-data">${
                  item.dispose ? item.dispose : ""
                }</span></div>
                <div class="popover-info-item">处置率：<span class="popover-info-item-data">${
                  item.disposeRate ? item.disposeRate : ""
                }</span></div>
              </div>
              <div class="fatherBreathIcon">
                <div class="sonBreathIcon" style="background: rgba(70, 143, 254, 1); width: 10px; height: 10px; animation-delay: 0s;"></div>
                <div class="sonBreathIcon" style="background: rgba(70, 143, 254, 0.8); width: 15px; height: 15px; animation-delay: 0.4s;"></div>
                <div class="sonBreathIcon" style="background: rgba(70, 143, 254, 0.6); width: 20px; height: 20px; animation-delay: 0.8s;"></div>
                <div class="sonBreathIcon" style="background: rgba(70, 143, 254, 0.4); width: 25px; height: 25px; animation-delay: 1.2s;"></div>
                <div class="sonBreathIcon" style="background: rgba(70, 143, 254, 0.2); width: 35px; height: 35px; animation-delay: 1.6s;"></div>
             </div>
            </div>
            `;
          if (!that.popoverMarker) {
            that.popoverMarker = new AMap.Marker({
              map: that.myMap,
              content: contentText,
              position: e.target._position,
              offset: new AMap.Pixel(-119, -127),
            });
            arr.push(that.popoverMarker);
          } else {
            that.popoverMarker.show();
            that.popoverMarker.setContent(contentText);
            that.popoverMarker.setPosition(e.target._position);
          }
        });
        //鼠标移入事件
        //marker.on("mouseover", function (e) {}
        //鼠标移出
        // marker.on("mouseout", function (e) {
        // that.popoverMarker.hide();
        // });
      });
    },
//移除点位
this.markers.forEach((ele) => {
 this.myMap.remove(ele);
});

<style lang="scss">
.fatherBreathIcon {
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 49.75%;
  transform: translate(-50%, 40%) rotateX(60deg);
  .sonBreathIcon {
    position: absolute;
    top: 210%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation-name: iconBreathLight;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 2s;
    -webkit-user-drag: none;
    filter: none;
    opacity: 0;
    z-index: -1;
  }
}
.fatherBreathIcon-table {
  width: 60px;
  height: 60px;
  transform: translate(-50%, 40%) rotateX(60deg);
  .sonBreathIcon {
    position: absolute;
    top: 326%;
    left: 255.5%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation-name: iconBreathLight;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 2s;
    -webkit-user-drag: none;
    filter: none;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes iconBreathLight {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.2;
  }
  20% {
    opacity: 0.4;
  }
  30% {
    opacity: 0.6;
  }
  40% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}
.popover-box-table {
  position: relative;
  margin-top: -70px;
  margin-left: -126px;
}
.popover-box {
  width: 248px;
  background: #fff;
  white-space: nowrap;
  font-size: 14px;
  padding: 15px 15px 6px;
  box-shadow: 0 0 12px 0 #0000001a;
  border-radius: 4px;
  margin-top: -93px;
  margin-left: -2px;
  position: relative;
  &::before {
    content: "";
    border-top: 10px solid #797979;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -8px;
    border-radius: 5px;
  }
  &::after {
    content: "";
    border-top: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -6px;
    border-radius: 5px;
  }
  .popover-title {
    border-bottom: 1px solid #e1e6f0;
    padding: 0px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .popover-title-name {
      font-weight: 700;
      display: flex;
      align-items: center;
      .line {
        border-radius: 10px;
        width: 3px;
        height: 14px;
        background: #3886ff;
        margin-right: 10px;
      }
    }
  }
  .popover-info {
    margin-top: 6px;
    .popover-info-item {
      color: #909299;
      padding: 7px 0;
      display: flex;
      .popover-info-item-data {
        font-weight: 700;
        color: #303133;
        display: block;
        overflow-x: auto;
      }
    }
  }
}
// ::-webkit-scrollbar{
//     height: 9px;
//     width: 9px;
// }

// ::-webkit-scrollbar-thumb {
//     border-radius: 10px;
//     background-color: rgba(13, 78, 230, 0.4);
// }
::-webkit-scrollbar-thumb:hover {
  background: rgba(192, 192, 192, 1);
}
</style>