解决百度地图的父元素出现滚轮之后启用鼠标缩放模式之后出现偏移的现象

已于 2023-11-06 16:12:25 修改
阅读量1.4k 收藏 3
点赞数 3
分类专栏： 百度地图 文章标签： 计算机外设 vue 大屏端
于 2023-06-29 16:43:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61468054/article/details/131458111
版权
文章描述了一种在Vue项目中处理百度地图在弹框内且有滚动条时，鼠标滚轮缩放导致的地图偏移问题。通过监听滚动事件，动态调整地图容器的位置，以保持地图的正确显示。解决方案包括在`mounted`阶段添加滚动事件监听，获取并调整地图DOM元素的位置。
摘要由CSDN通过智能技术生成

最近在做项目的时候，有个功能是点击详情按钮的时候在一个弹框里展现出来列表的详情

因为详情弹框里面的数据有其他的表格数据，然后在弹框的下边使用百度地图展示后端发送过来的坐标点，然后把坐标点转换之后使用百度地图的方法制作覆盖物上去。这里边就出现了一个问题是：

百度地图的父元素如果高度超过的了body并且出现了滚动条的情况，使用百度地图的鼠标滚轮缩放功能是会发生偏移的，这个我在网上看了很多文章发现大多说的都是解决的话要么更换地图。

要么把百度地图放在body的可是区域内，也就是说我可以把百度地图放在弹框的上边，注意刚开始时，我说的是把百度地图放在了弹框的下边并且上边有其他的展示信息，经过我一下午的倒腾终于发现他的这种偏移量是可以解决的：

可以看到此时我们的地图处于弹框的下半部分，在百度地图的父元素出现滚动条之后你向下滚动滚动条之后 ，此时鼠标在放在百度地图上就会发现鼠标缩放不会在鼠标的中心点，是会发生向上的偏移解决办法就是我们要首先去监听这个滑轮滚动的事件

  mounted() {//首先这里我在mounted函数里监听了滚轮滑动
        window.
最低0.47元/天 解锁文章
樱嘤缨
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用百度地图 中心点和坐标偏移的问题
Beam
07-01 9964
百度地图的引入 在index.html引入百度地图开发包如下： <!DOCTYPE html> <html> …… <body> <div id="app"></div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2....
百度地图偏移，高德地图偏移的解决方法
05-27
百度纠偏 高德纠偏 地图纠偏 地图偏移
百度地图处理地图缩放出现中心点偏移的bug
TianYu0-0的博客
03-24 3700
百度地图处理地图缩放出现中心点偏移的bug 问题 百度地图的未放在标准文档流中，地图缩放出现中心点偏移。 出现原因 百度地图加载的位置因为定位等原因，与整个html 页面产生了不同步滚动的问题。百度地图的缩放是基于body层的，如果body层有滚动条，并且不在最顶端，在当前位置插入了百度地图，也就是出现该问题时的状态，这个时候滚轮缩放就会产生偏移。 解决方案 主要是通过监听到缩放开始事件来获取缩放前的中心点经纬度，然后监听到缩放结束事件后，将地图重新位移到缩放之前的中心点处。 vue代码如下： <t
百度地图滚轮缩放时产生位置偏移 问题
dianjing9362的博客
07-20 1988
最近在调用百度地图的过程中，发生了在地图上滚轮缩放，结果产生了位置偏移的情况，同样在移动端，双指缩放也有同样的问题。 这个问题产生的原因主要是因为百度地图加载的位置因为定位等原因，与整个html 页面产生了不同步滚动的问题。 百度地图的缩放是基于body层的，如果body层有滚动条，并且不在最顶端，在当前位置插入了百度地图，也就是出现该问题时的状态，这个时候滚轮缩放就会产生偏移...
echarts引入百度地图vue3（大屏项目中缩放点偏移到左上角，解决代码在最后）
最新发布
zsy1833579605的博客
06-17 376
实际开发中的问题，遇到了大屏做了自适应，为非标准文档流之后，在缩放时不是以鼠标当前位置缩放的，而是偏移到左上角。index.html 需要先在这个文件中引入百度的ak。mapStyle的json数据。
百度地图滚轮缩放时基点偏移问题 - 非滚动条造成
fjl724619679的博客
05-20 573
观察发现加载百度地图的弹窗，是使用定位让弹窗居中的，当定位的top和left设置成0（即：弹窗定位到左上角）之后，百度地图的滚轮缩放的基点就会正常。重写了弹窗的样式，去掉弹窗的定位，使用flex弹性布局使弹窗居中，完成之后弹窗还是居中的，鼠标滚轮缩放地图基点也不会偏移。最近Web端项目中使用到了百度地图，地图上用鼠标滚轮进行缩放时，但是我的地图是在弹窗中使用的，并没有滚动条，上述的方法没法解决。这个解决办法也会出现一个问题，就是弹窗没法再进行拖拽了；
百度地图-鼠标滚轮缩放导致地图中心点偏移问题
栀蒽coding_的博客
03-14 4140
百度地图接入-鼠标滚轮滚动中心点偏移问题
百度地图 放大或缩小后 中心点偏移(中心点不是在放大前的点)
weixin_34072857的博客
07-02 6368
1.执行 放大或缩小 操作时，先获取中心点经纬度 $scope.map.getCenter().lng; // 经度 $scope.map.getCenter().lat; // 维度 2.获取当前缩放级别 $scope.map.getZoom(); 3.每次执行，再次定位中心点 和 缩放级别 $scope.map.centerAndZoom(new BMap.Point($scope...
百度地图缩放滚轮，位置出现偏移
花铛
11-22 2843
向上滚动滚轮，位置向上偏移的；向下滚动滚轮，位置向下偏移。 实际测试发现，当地图容器的父元素出现滚动条的时候，就会出现上述情况。 <template> <div style="width:100%;height:100%;overflow-y: auto;"> <div style="width:100%;height:1000px;margin-t...
百度地图滚轮缩放产生位置偏移
m18066975852的博客
06-18 1358
当页面有滚动，当前页面不在页面最上方时，会导致此问题，解决方法如下。 //打开地图前调用 mapOpen(){ this.top = this.getScrollTop() if (this.top) { this.setScrollTop(0) } }, //关闭地图后调用 mapClose() { this.setScrollTop(this.top); this.top =...
百度地图缩小后图标定位不准，BMap.Marker打点坐标发生偏移
学敲代码的Stars的博客
11-03 664
占位，之后补充。
asp百度地图定位
01-25
百度地图API提供了丰富的地图控制选项，如滚动轮缩放、键盘导航等，可以通过调用相应的`enable*`方法启用这些功能： ```javascript map.enableScrollWheelZoom(); // 启用滚轮缩放 map.enableKeyboard(); // 启用...
百度地图API开发手册
08-29
- `enableScrollWheelZoom`：是否启用滚轮缩放。 - `mapStyle`：地图样式设置。 - `minZoom`：最小缩放级别。 - `maxZoom`：最大缩放级别。 ##### Viewport - **简介**：`Viewport`类表示地图视口，即当前可见...
brackets-minimap:Brackets开源代码编辑器的小地图-Source code editor
03-24
括号小图 ... 将鼠标悬停在minmap上以进行缓慢平滑的滚动，同时使用鼠标滚轮滚动。 通过将左侧边缘拉到适当的位置来更改小地图的宽度。 滚动时按住CTRL键（在Mac上为CMD）。 小地图的缩放比例将随
transform导致百度地图缩放发生偏移解决方案
weixin_51609337的博客
06-07 1113
试了很多种方法都无效，最终是把地图提取出来，新建一个html文件，然后用iframe标签来引用新的页面，这样的话地图进行鼠标缩放的时候，就不会发生偏移了。制作可视化大屏的时候，会用到transform来实现自适应，那么就导致了地图缩放时发生偏移，体验感很差。
百度地图滚轮缩放产生位置偏移的解决办法
前端一线搬运工的博客
09-03 5282
查了全网并没有任何解决办法, 但是有一段话引起我的注意: 百度地图的缩放是基于body层的. 随后阅读地图源码发现: 地图定位确实是基于body层做计算, 所以你的地图如果出现这个问题, 十之八九脱离了标准文档流; 解决办法: 让百度地图加载在body滚动中, 不要加载在某个带有滚动条的''容器''里面(既地图放在CSS标准文档流中); 拓展: 1.Document.body.scrollTop为0的原因 2.Element.getBoundingClientRe...
百度地图自定义坐标标识覆盖物，随地图缩放偏移解决办法
热门推荐
木与石
03-17 1万+
百度地图在添加自定义标注的时候可能会遇见坐标标识，随着地图缩放位置产生偏移，我折腾了一个上午，记下这篇。
ArcGIS 地图限制鼠标滚轮缩放代码在哪
07-13
在 ArcGIS API for JavaScript 中，你可以通过设置地图的鼠标滚轮缩放限制来禁用或启用鼠标滚轮缩放功能。以下是一个示例代码： ```javascript // 创建地图视图 var view = new MapView({ container: "viewDiv", map: map }); // 禁用鼠标滚轮缩放 view.on("mouse-wheel", function(event) { event.stopPropagation(); }); // 启用鼠标滚轮缩放 view.on("mouse-wheel", function(event) { event.stopPropagation(); event.preventDefault(); }); ``` 在这个示例中，我们首先创建了一个地图视图 (`var view = new MapView`)，然后使用 `view.on("mouse-wheel")` 事件监听器来控制鼠标滚轮缩放。 如果你想禁用鼠标滚轮缩放，你可以简单地使用 `event.stopPropagation()` 来阻止事件冒泡，这样地图就不会对鼠标滚轮事件做出反应。 如果你想启用鼠标滚轮缩放，你需要使用 `event.stopPropagation()` 来阻止事件冒泡，并且使用 `event.preventDefault()` 来阻止默认的鼠标滚轮缩放行为。 请确保在代码中适当地替换 `viewDiv` 和 `map`，以便与你的应用程序相匹配。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值