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

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

ruisui884个月前 (02-09)技术分析19

效果图:




思路:通过后端的接口数据循环遍历出点的经纬度、弹窗信息,依次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动态循环添加多个点,点击点出现弹窗信息” 的相关文章

Slackware 15.0?发布:历史最久且在维护的Linux发行版本

Slackware 14.0 于 2012 年发布,在经过了数年的等待之后 Slackware 15.0 发行版本于今天正式发布。Slackware 于 1993 年发布,是目前历史最悠久、且仍在维护的 Linux 发行版本。Slackware 15.0 在去年进入测试阶段,在发布几个候选版本之后终...

基于Spring Cloud+VUE的多租户小程序商城源码「快速二开可商用」

一、系统介绍JooLun平台是一个专注微信快速二开系统研发的平台,采用Java语言开发,使用的是最新微服务前后端分离技术,目前有公众号和小程序商城两个版本,有公众号后台管理、小程序商城。基于Spring Cloud微服务+VUE实现的核心框架多租户小程序商城源码,核心框架采用SpringBoot2+...

TDesign企业级开源设计系统越发成熟稳定,支持 Vue3 / 小程序

TDesing 发展越来越好了,出了好几套组件库,很成熟稳定了,新项目完全可以考虑使用。早在2021年,腾讯的 TDesing 刚发布不久,我就写了一篇简短的文章来介绍,当时主要关注的是 TDesign 的 Vue 组件库和用来搭建 admin 后台系统的实用性。虽然当时看起来不错,但还处于测试版,...

首批龙芯3A6000电脑规模化应用:内置QQ、微信主流软件

6月18日消息,今日,龙芯中科宣布,近千台龙芯3A6000电脑走进福建福州某区各科室并服务于具体工作开展。据介绍,该批电脑为实现首批规模化应用的3A6000整机产品,搭载国产操作系统,内置主流办公和即时通讯等软件,可充分满足打印机利旧要求(兼容原有打印机设备)。3A6000根据官方晒出的桌面截图显示...

什么是同步通信?什么是异步通信?它们有什么区别?

串行通信一般又分为同步和异步通信,同步通信需要同步时钟信号,而异步通信则不需要同步时钟信号。同步通信:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。异步通信:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。同步通信与异步通信有什么区别呢?1、同步通信要求接收端...

「网络」异常网络RST包出现的原因分析

有以下情况会发送RST包1.connect一个不存在的端口;2.向一个已经关掉的连接send数据;3.向一个已经崩溃的对端发送数据(连接之前已经被建立);4.close(sockfd)时,直接丢弃接收缓冲区未读取的数据,并给对方发一个RST。这个是由SO_LINGER选项来控制的;5.a重启,收到b...