vue高德地图多点标记，点击出现弹窗

占坑预警

先展示效果：

image.png
image.png

代码：

<template>
  <div id="container" style="width: 778px;height: 434px;"></div>
</template>

<script>
import AMap from "AMap";
export default {
  props:["allCopmpony"],
  data() {
    return {
      map: null,
      mapStyle: [],
      marker: {},
      markerList: []
    };
  },

  watch: {},

  created() {
    console.log(this.allCopmpony)
  },

  mounted() {
    this.mapInit();
    this.setHospitalMarker(this);
  },
  methods: {
    mapInit() {
      let _self = this;
      _self.weXinAmapMap = new AMap.Map("container", {
        center: [118.54436, 33.011971],
        layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()],
        zooms: [1, 18],
        zoom: 12
      });
      this.clickIcon = new AMap.Icon({
        image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
        size: new AMap.Size(24, 30), //图标大小
        imageSize: new AMap.Size(24, 30)
      });
    },
    setHospitalMarker(_this) {
      this.icon = new AMap.Icon({
        size: new AMap.Size(36, 36),
        image:
          "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        imageSize: new AMap.Size(24, 30),
        imageOffset: new AMap.Pixel(0, 0)
      });
      let markerList = [];
      this.allCopmpony.forEach((element, index) => {
        let marker = new AMap.Marker({
          map: this.weXinAmapMap,
          zIndex: 9999999,
          position: [element.longi, element.lati]
        });
        marker.id = element.enterNumber;
        marker.on("click", this.controlHospitalMarker);
        _this.weXinAmapMap.add(marker);
        this.markerList.push(marker);
      });

      var content = [
        `<div class="infoShow">
          <div class="decoration-top"></div>
          <div class="decoration-bottom"></div>
          <p class="introduce"><i class="hospital-flag"></i><span>医院信息</span></p>
          <p class="name">名称:章广人民医院</p>
          <p class="address">地址:滁州市南谯区章广镇003县道</p>
        </div>`
      ];
      this.infoWindow1 = new AMap.InfoWindow({
        anchor: "top-left",
        content: content.join("<br>") //传入 dom 对象，或者 html 字符串
      });
      this.infoWindow1.open(_this.weXinAmapMap, [118.54436, 33.011971]);
      var newCenter = this.weXinAmapMap.setFitView();
    },

    //控制医院标记的信息窗体的显示
    controlHospitalMarker(e) {
      // console.log('111',this.markerList)
      console.log(e);
      this.infoWindow1.open(this.weXinAmapMap, [e.lnglat.M, e.lnglat.O]);
      this.markerList.forEach(item=>{
        item.setIcon(this.icon)
      })
      e.target.setIcon(this.clickIcon);
      this.$emit('changeTraceNumber',e.target.id)
    }
  }
};
</script>

<style scoped>
.map {
  width: 600px;
  height: 600px;
}

.context_menu {
  position: relative;
  min-width: 12rem;
  padding: 0;
}

.btn {
  position: absolute;
  top: 0px;
}

.context_menu p {
  cursor: pointer;
  color: red;
  padding: 0.25rem 1.25rem;
}

.context_menu p:hover {
  background: #ccc;
}
.amap-markers .amap-marker .amap-marker-content .location {
  width: 100px;
  height: 30px;
  background: #fff;
}
</style>

有空会将坑填上！并附上详细讲解！祝各位生活愉快！