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;
}
没了,结束了,是不是很简单呐,如有错误,欢迎留言.如有问题,不吝赐教。
如果此篇博文对您有帮助,还请动动小手点赞 收藏 ?留言 呐~,谢谢 ~ ~