天天看点

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

1.问题描述.

在移动端使用高德地图和vant组件库的popup弹出层,导致弹出层秒关闭.功能不能实现.!

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210428134533210.gif

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

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

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

点击的一瞬间触发了遮罩层的点击事件,导致弹出层关闭

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

3.解决办法

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

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

继续阅读