vue-amap动态循环添加多个点，点击点出现弹窗信息

效果图：



思路：通过后端的接口数据循环遍历出点的经纬度、弹窗信息，依次push进一个空的数组，最后将这个数组赋值给data里面定义的变量。
话不多说上代码：
HTML

      <el-amap-marker
        v-for="marker in markers"
        :key="marker.index"
        :position="marker.position"
        :events="marker.events"
      ></el-amap-marker>
      <el-amap-info-window
        v-if="window"
        :position="window.position"
        :visible="window.visible"
        :content="window.content"
      ></el-amap-info-window>

JS

data() {
	lonlat: [], //经纬度
    markers: [], //点
    windows: [], //弹窗
    window: "", //弹窗的显示影藏
},
mounted(){
        let markers = [];
        let windows = [];
        let self = this; //this重定向
        for (let i = 0; i < self.lonlat.length; i++) {
          windows.push({
            position: this.lonlat[i],
            content:'',
            visible: false,
          });
          //点
          markers.push({
            position: this.lonlat[i],
            events: {
              click() {
                //弹窗信息
                self.windows[i].content = 
                `<div>
                  <div><span>机构名称:</span>${self.name[i]}</div>
                  <div><span>管辖区域:</span>${self.areaName[i]}</div>
                  <div><span>地址:</span>${self.address[i]}</div>
                  <div><span>联系电话:</span>${self.phone[i]}</div>
                  <div><span>联系人:</span>${self.contactName[i]}</div>
                  <div><span>状态:</span>${self.useFlag[i]}</div>
                </div>`;
                //给信息窗体里的判断默认传false默认不显示
                self.windows.forEach((window) => {
                  window.visible = false;
                });
                //当前点击的圆点对应的信息窗体为true显示
                self.window = self.windows[i];
                self.$nextTick(() => {
                  self.window.visible = true;
                });
              },
            },
          });
        }
        this.markers = markers;
        this.windows = windows;
}

没了，结束了，是不是很简单呐
最后：如果此篇博文对您有帮助，还请动动小手点点关注点点赞呐~，谢谢 ~ ~