vue-baidu-map自定义控件事件冒泡阻止

最新推荐文章于 2024-05-14 20:31:17 发布

终老zyx

最新推荐文章于 2024-05-14 20:31:17 发布

阅读量643

点赞数

分类专栏： vue 前端 uni-app 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_43963096/article/details/125412865

版权

vue 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

uni-app

3 篇文章 0 订阅

订阅专栏

Q:地图上的覆盖物上滚轮事件被地图拦截，覆盖物上的滚动条无法滚动，而地图却在缩放

A：无法滚动是因为滚动的时候 wheel 事件冒泡到了地图容器上，容器收到这个事件后执行 preventDefault 和缩放两个句柄，把native 的 wheel行为干掉了。之前的版本是因为设计失误，把控件的元素丢到地图容器外面了，这样虽然滚动行为看起来正常了，但是会造成排版上的问题。综上所述，我认为这个是百度地图本身的 featrue，所以不打算针对这个问题做迭代。如果你想实现原生的滚动行为，只需在自定义控件上阻止wheel 事件冒泡即可。

@DOMMouseScroll.native.stop="getEventTar" @mousewheel.native.stop="getEventTar" @wheel.native.stop="getEventTar" 。分别是IE、firfox、chrome的滚轮事件

关于此问题详细描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

终老zyx

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue-baidu-map自定义控件事件冒泡阻止

vue-baidu-map
复制链接

扫一扫

专栏目录

百度地图自定义控件分享

12-02

废话不多说了，直接奉上代码; 代码如下: [removed] var map = new BMap.Map(‘allmap’); var Bcenter = new BMap.Point(116.404,39.915); map.centerAndZoom(Bcenter,11); //自定义控件 function staticControl(){ this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; this.defaultOffse

阻止事件冒泡解决百度地图有滚动条会偏移问题

weixin_67238333的博客

12-12

591

if (e.preventDefault) {//这是取消默认行为，要弄清楚取消默认行为和冒泡不是一回事。if (e.preventDefault) {//这是取消默认行为，要弄清楚取消默认行为和冒泡不是一回事。解决思路，给百度地图容器添加滚轮事件，然后再阻止滚轮事件冒泡到body上。因为地图容器的缩放是在body上边。if (e.stopPropagation) { //这是取消冒泡。if (e.stopPropagation) { //这是取消冒泡。//放大 getZoom返回地图当前缩放级别。

1 条评论您还未登录，请先登录后发表或查看评论

Vue3+百度地图的使用--实现地图的渲染、自动定位（点击控件定位）、地图搜索位置并定位、百度地图logo去掉、坐标图像标注（坐标跳动动画）和坐标点击弹窗，setup语法糖，element-plus

最新发布

weixin_43373009的博客

05-14

1281

最近在赶新的项目，用了百度地图去开发，涉及地图的操作太多，目前就摸清标题所写的功能，趁今晚有空记录下来先，因为在开发的的过程找了许多帖子，因为我基于Vue3去开发的，发现很多都是基于vue2开发的，Vue3的比较少，改成Vue3时改的吃力或者修改后运行不了，所以折腾一了段时间。所以把目前完成的代码发出来，供大家参考，涉及后端的接口的数据，我也模拟了一些数据在上面了，可以开箱即用。

百度地图API的事件处理：覆盖物阻止冒泡

weixin_30437337的博客

06-28

1064

百度地图API笔记百度地图API的事件处理：覆盖物阻止冒泡参考文章： https://www.cnblogs.com/well1010/p/3509453.html 点击覆盖物，会触发地图的点击事件，那么在触发标注事件的时候呢，阻止冒泡： e.domEvent.stopPropagation(); 说明：原本阻止冒泡应该用句代码的e.stopPropagation();，但是失...

百度地图自定义控件

互联网编程爱好者

02-22

683

百度地图自定义控件 使用场景：使用百度地图时，希望在地图上覆盖自定义的组件。此时需要自定义组件，否则我想不到什么办法可以在地图之上有其他页面进行操作了。百度地图使用方法：去官网百度地图API,里面介绍的很详细。使用前准备，script中ak的值******代表的是账号申请的密钥，不收费的。 <div id="map-container"></div> <script type="text/javascript" src="https://api.map.bai

百度地图已经封装好的覆盖物如何阻止事件冒泡

花铛

09-24

1344

比如：地图上有一个图标，当点击图标的时候，会执行覆盖物绑定的事件；执行完之后，仍然会触发地图绑定的事件，也就是事件穿透了。 bmap进行了封装，将原始的事件放到了domEvent中。 marker.addEventListener('click',function(e){ //覆盖物阻止事件冒泡到地图上 e.domEvent.stopPropagation(); ...

使用Vue-Grid-Layout实现自定义工作台

02-01

4. **监听拖动和调整事件**：Vue-Grid-Layout 提供了 `onDragEnd` 和 `onResizeEnd` 事件，你可以在此处理布局变化并保存到数据存储。 5. **动态更新布局**：当用户调整组件位置或大小时，Vue-Grid-Layout 会自动...

vue-baidu-map离线百度地图，并附带jar包免费下载百度瓦片数据

02-23

1.vue-baidu-map在线地图代码不用改动，只用按照文档添加baidu-api.js和baidu-init.js，并在vue依赖包 node_modules文件找到，修改vue-baidu-map的 index.js文件就能完成离线配置 2.jar包可以免费下载百度地图瓦片...

vue-video:vue移动端简单自定义控件播放器

05-13

"vue-video" 提供了一个针对移动端优化的简单自定义控件播放器解决方案，使得在Vue项目中集成视频播放功能变得简单。在创建一个基于Vue的移动端视频播放器时，主要涉及以下几个关键知识点： 1. **Vue组件**：Vue...

vue-baidu-map,百度地图切图工具，瓦片图制作利器

04-03

百度地图切图工具，瓦片图制作利器，结合vue-baidu-map制作瓦片图，可直接生成瓦片图内容，生成对应的瓦片图内容的HTML

Vue整合百度地图插件

02-22

真是项目的一小块案例，属于基础页面，包含Vue的基本用法，Vuex,element以及和后台json交互

百度地图自定义覆盖物demo

08-02

本demo说明http://blog.csdn.net/zxinlong/article/details/9712909 使用的开发环境：eclipse-4.2;jdk-1.7;编码-utf8;sdk-8

vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

01-21

产品开发用的是 vue, 经同事介绍使用了vue-video-player 视频播放插件，通过 demo 案例很快实现了视频播放效果 <video-player class=vjs-custom-skin ref=videoPlayer1 :options=playerOptions :...

VUE使用百度地图插件

qq_38746300的博客

01-14

1197

使用百度地图插件, 实现手动定位, 获取经纬度地址; 设置经纬度定位; 地址搜索

vue-baidu-map控件总结

LEVsunshine的博客

10-08

4309

vue-baidu-map控件总结 1、比例尺控件（BmScale）属性： anchor 控件停靠位置 offset 控件偏移值 2、缩放控件（BmNavigation）属性： anchor 控件停靠位置 offset 控件偏移值 type 平移缩放控件的类型 showZoomInfo 是否显示级别信息（Boolean） enableGeolocation 控件是否集成定位功能（Boo...

【百度地图】百度地图的使用方法和在vue中如何使用百度地图（超详细）

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交

vue-baidu-map自定义控件 事件冒泡阻止

Q:地图上的覆盖物上滚轮事件被地图拦截，覆盖物上的滚动条无法滚动，而地图却在缩放

“相关推荐”对你有帮助么？

vue-baidu-map自定义控件事件冒泡阻止