js百度地图鼠标滚轮缩放导致地图中心点偏移问题
更新时间：2023年02月14日 16:18:19 作者：菑恩_
本文主要介绍了js百度地图鼠标滚轮缩放导致地图中心点偏移问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、问题
带滚动条的弹窗中的地图正常显示，滚轮缩放位置发生偏移，放大时位置是靠上偏移的，缩小时位置是靠下偏移的, 高德地图、腾讯地图不存在此问题，百度地图存在
二、问题分析
是由于百度地图默认定位是取浏览器文档对象的scrollTop=0的位置, 是由body中心为中心点的, 如果html页面(或者是弹窗)出现滚动条，那么地图的中心位置其实是有偏移的，偏移的距离就是滚动条滚动的距离。这个时候缩放就会出现上述偏移的情况。
三、解决方法
1.禁止滚轮缩放, 添加缩放控件
禁止滚轮缩放, 添加百度地图缩放控件
mapCanvas = new BMap.Map("mapBox", { enableMapClick: false });
var point = new BMap.Point(116.379341, 39.938776);
mapCanvas.centerAndZoom(point, 15);
//弹窗中带有滚动条 缩放会存在中心点偏移问题
mapCanvas.disableScrollWheelZoom(); //禁止鼠标滚轮缩放
mapCanvas.addControl(scaleCtrl);
//平移缩放控件
mapCanvas.addControl(new BMap.NavigationControl());
var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
效果:
添加缩放效果
2.调节滚动条
在弹窗打开的时候，检查滚轮位置是否在最顶部，如果不在的话，调整到最顶部，然后在弹窗关闭的时候，恢复到最初的位置即可。
解决方法可参考:
调节滚动条位置-解决方案
总结
到此这篇关于js百度地图鼠标滚轮缩放导致地图中心点偏移问题的文章就介绍到这了,更多相关js百度地图缩放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了Bootstrap3下拉菜单的实现方法，非常不错，具有参考借鉴价值，需要的朋友参考下2017-02-02
JavaScript 在开发过程中可能会出现很多奇怪的问题。这篇文章主要为大家整理了一些JavaScript中奇怪的问题及解决方法，感兴趣的可以了解一下2023-03-03
这篇文章主要为大家详细介绍了前端实现PDF文件预览的7种方案与性能对比,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-03-03
首先请下载JScript.chm这本手册，无论新手老手，有一本手册是免不了的，特别是对于新手，如果你没有空翻犀牛书，那么这本手册将是你了解这门语言的首选。下面所讲的大多数，手册上可以没有提及，或提及很少的内容。2008-07-07
这篇文章主要介绍了js实现简单折叠、展开菜单的方法,涉及javascript动态操作页面元素变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
上传文件时,选择了文件后想清空文件路径，经搜索发现个不错的方法在此与大家分享下，感兴趣的朋友不要错过2013-10-10
JavaScript中Array数组常用方法(附上相应的用法及示例)
这篇文章主要给大家介绍了关于JavaScript中Array数组常用方法,文中附上相应的用法及示例,需要的朋友可以参考下2024-01-01
下面的一个例子就是以独立函数写出的JavaScript日期格式化函数，独立的format函数。回到格式化的这一知识点上，我们考查的是怎么实现的、运用了哪些原理2014-01-01
这篇文章详细介绍了js中prototype用法及实例，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了JavaScript反射与依赖注入,结合实例形式较为详细的分析了JavaScript反射与依赖注入的概念、原理、定义、使用方法及相关操作注意事项,需要的朋友可以参考下2018-05-05
最新评论