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

效果图：

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

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

                  
机构名称:${self.name[i]}
                  
管辖区域:${self.areaName[i]}
                  
地址:${self.address[i]}
                  
联系电话:${self.phone[i]}
                  
联系人:${self.contactName[i]}
                  
状态:${self.useFlag[i]}
                
`;
                //给信息窗体里的判断默认传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;
}

没了，结束了，是不是很简单呐，如有错误，欢迎留言.如有问题，不吝赐教。
如果此篇博文对您有帮助，还请动动小手点赞 收藏 留言 呐~，谢谢 ~ ~