当前位置:首页 > 技术分析 > 正文内容

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

ruisui883个月前 (02-09)技术分析13

效果图:




思路:通过后端的接口数据循环遍历出点的经纬度、弹窗信息,依次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; }

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/1834.html

标签: vue $nexttick
分享给朋友:

“vue-amap动态循环添加多个点,点击点出现弹窗信息” 的相关文章

「2022」打算跳槽涨薪,必问面试题及答案——VUE篇

1、为什么选择VUE,解决了什么问题?vue.js 正如官网所说的,是一套构建用户界面的渐进式框架。与其它重量级框架不同的是,vue 被设计为可以自底向上逐层应用。vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另外一方面,当与现代化工具链以及各种支持类库结合使用时,vu...

Windows 下 Git 拉 Gitlab 代码

读者提问:『阿常你好,Windows 下 Git 拉 Gitlab 代码的操作步骤可以分享一下吗?』阿常回答:好的,总共分为五个步骤。一、Windows 下安装 Git官网下载链接:https://git-scm.com/download/winStandalone Installer(安装版)注意...

理解virt、res、shr之间的关系(linux系统篇)

前言想必在linux上写过程序的同学都有分析进程占用多少内存的经历,或者被问到这样的问题——你的程序在运行时占用了多少内存(物理内存)?通常我们可以通过top命令查看进程占用了多少内存。这里我们可以看到VIRT、RES和SHR三个重要的指标,他们分别代表什么意思呢?这是本文需要跟大家一起探讨的问题。...

内存问题探微

这篇文章是我在公司 TechDay 上分享的内容的文字实录版,本来不想写这么一篇冗长的文章,因为有不少的同学问是否能写一篇相关的文字版,本来没有的也就有了。说起来这是我第二次在 TechDay 上做的分享,四年前第一届 TechDay 不知天高地厚,上去讲了一个《MySQL 最佳实践》,现在想起来那...

三维家-系统快捷键使用

快键件使用:通过简单的键盘+鼠标操作,快速完成搭配。1.基础快捷键1) Ctrl+V:复制选中对象第一步:鼠标左击物体,按下Ctrl+V 即可复制选中对象。2) Ctrl+G:组合多选对象第一步:按住Ctrl键多选对象--按住Ctrl+G--确定。3) Ctrl+B:解组选中对象第一步:左击选中对象...

Vue进阶(幺叁捌):vue路由传参的几种基本方式

1、动态路由(页面刷新数据不丢失)methods:{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`,...