高德地图marker配合vant ui库的popup弹出层,导致弹出层秒关闭的问题解决.

最新推荐文章于 2024-10-01 12:43:42 发布
原创 最新推荐文章于 2024-10-01 12:43:42 发布 · 1.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文讲述了在移动端使用高德地图与vant组件库时，遇到popup弹出层秒关闭的问题。通过排查发现点击遮罩层外的maker触发遮罩层事件，进而关闭弹出层。博主分享了通过禁用遮罩层并调整地图点击回调来解决这个问题的方法。

1.问题描述.

在移动端使用高德地图和vant组件库的popup弹出层,导致弹出层秒关闭.功能不能实现.!
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210428134533210.gif在这里插入图片描述

在这里插入图片描述

2. 经过排查代码,发现是在点击遮罩层外部的maker时,触发了遮罩层的点击事件.然后因为popup默认是点击遮罩层关闭弹出层.

在这里插入图片描述在这里插入图片描述

点击的一瞬间触发了遮罩层的点击事件,导致弹出层关闭
在这里插入图片描述

3.解决办法

最终我通过不启用遮罩层,并且在地图的点击回调函数中,将控制弹出层的变量变为false,解决了此bug
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

最低0.47元/天 解锁文章
141：vue+leaflet 利用高德逆地理编码，点击地图标记marker，popup地址信息
大剑师兰特的GIS世界
01-24 955
本示例的目的是介绍演示如何在vue+leaflet中利用高德逆地理编码，点击地图标记marker，popup地址信息 。主要利用高德地图的api将坐标转化为地址，然后在点击的位置，弹出弹窗，在里面显示出地址信息。
关于Popup的小坑坑
jiushidt的专栏
05-17 722
在做一个自定义的输入搜索框，用textbox+popup来实现。其中有一个小需求，当textbox激活并且没有文本输入的时候，也要显示popup。很自然的想到了使用IsKeyboardFocusedChanged事件 private void input_IsKeyboardFocusedChanged(object sender, DependencyPropertyChangedEventArgs e) { if (e.NewValue.Equ
antv/l7+高德地图+天气弹窗
花椒和蕊的博客
09-06 3054
L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持高德地图和 MapBox 两种。 1、引入map import { GaodeMap } from '@antv/l7-maps'; // 默认引入高德1.x import { Scene, Marker, MarkerLayer, Popup } from '@antv/l7' 2、实例化 使用地图申请地图 token 为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。
vue - Vant库 - popup弹出框实现两秒后自动关闭
m0_46364033的博客
06-29 5423
2021-06-29 vue - Vant库 - popup弹出框实现两秒后自动关闭 <van-button plain color="#4b8ffb" @click="toCancel">取消预约</van-button> <van-popup v-model="show"> <div class="myAppointment-content-popup"> // 弹出框内容根据自己需要填写 <van-i
vant-popup组件点击黑色遮罩层不关闭弹窗
肖肖肖丽珠的博客
01-13 3045
bind:close
高德地图Marker拖动圆环范围.7z
07-12
这些问题都需要通过熟练掌握JavaScript、CSS3以及高德地图API的高级特性和最佳实践来解决。 总之，"高德地图Marker拖动圆环范围"是一个结合了地图API、JavaScript编程、用户交互设计的项目，它展示了开发者如何利用...
高德地图添加Marker及缩放比例尺示例
最新发布
08-11
以“高德地图定位缩放比例尺添加Marker的Demo”为例，它展示了如何在Android应用中集成高德地图，并实现用户定位、比例尺显示、Marker添加及自定义Marker和缩放操作等核心功能。以下是这些功能的详细说明： 高德地图...
高德地图-标记点点击弹出气泡
06-17
在IT行业中，地图应用是不可或缺的一部分，特别是在移动设备上，如智能手机和平板电脑。高德地图作为一款流行的导航和定位服务，提供了丰富的API接口供开发者使用。本篇将深入探讨如何在高德地图中实现“标记点点击...
精选资源
leaflet-responsive-popup:此插件将覆盖L.Popup，从而消除了移动地图以查看弹出内容的需要
05-28
此插件无需移动地图即可看到弹出内容。 在地图边缘附近打开弹出窗口时会发生这种情况。 该实现将覆盖 。 这是一个和。 用法 包括传单和传单响应弹出式窗口 < script src =" ...
解决高德地图插件无法在弹框显示及无法抬高层级的问题
weixin_40030173的博客
12-17 2030
起初用vue项目引入高德地图插件，发现地图无法在弹框显示。 解决办法就是抬高层级。 但是用由于在弹框里，此处用 position: absolute;不行 直接用 position: fixed;然后z-index越大越好；
高德地图-自定义点击弹框（气泡）
06-17
在高德地图中点击弹出自定义弹框(气泡)。（结合上一个上传的文件，也可用于标记点的点击弹出的弹框气泡）
vue+Vant，关闭Popup弹框，遮罩层并没有消失
yaya07755的专栏
09-27 3634
点击Popup弹框关闭按钮，弹框的遮罩不能正常关闭，如下图。经研究，排除了popup属性问题，最后只能删除代码排除法。原因是搜索框的事件未定义，去掉@search="onSearch"和@search="onSearch"即可。或者在js里定义方法onSearch。
van-popup() 点击空白处关闭弹窗
qq_43532275的博客
04-08 6315
van-popup() 点击空白处关闭弹窗
vue2圆形标记（Marker）添加点击事件不弹出信息窗体（InfoWindow）的BUG解决
黄团团的个人博客
10-01 543
在事件处理函数（circleMarker.on("click", function (e) {...}）中，this的值通常指向触发事件的元素，而不是你想要的对象。代码都是参考高德的官方文档，初步看没有问题啊，但是点击事件就感觉失效了一样，后来仔细一看，问题就出现在这个this上面。地图上面的轨迹点希望能通过点击看到详细的经纬度信息，但是点击的时候就是显示不出来。通过将 this 赋值给 _that，可以在回调函数中引用原始的上下文。这样就解决了，细节上的问题，一时没反应过来。
解决vue3 Vben框架弹窗点击遮罩层不关闭的BUG
热门推荐
weixin_42125732的博客
01-26 1万+
最近博主正在努力学习VUE3的开发，在开发的过程中遇到了Vben框架弹窗点击遮罩层不关闭的BUG，查了很多资料后，亲测如下 找到这个对应的路径：\src\components\Modal\src\components\Modal.tsx 1.在setup 加上 emit参数 2.加上点击关闭的方法如 const handleCancel = (e: Event) => { emit('cancel', e); }; 3.最后再把它return 出去，注意加上方法，如下...
错误弹窗一秒后消失
M_SSY的博客
05-09 545
//错误弹窗1秒后消失 $('.pcbtel-pop').delay(1000).hide(0);
解决vant组件 van-dialog造成的页面闪动问题
luoxiaonuan_hi的博客
08-22 1363
解决方案：该问题是因为van-dialog默认是scale，将这个属性改为fade即可。
vue3 深度修改vant-popup组件遮罩层样式（模糊，毛玻璃）效果
m0_56565389的博客
07-19 5558
vue3深度修改vant-popup组件遮罩层样式（模糊，毛玻璃）效果。
【bug记录】Vue3 Vant UI 中 van-popup 不弹出
May21☀️
05-10 1699
原因：语法使用错误，使用了 Vue 2 的语法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值