目录一、问题二、问题分析三、解决方法1.禁止滚轮缩放, 添加缩放控件2.调节滚动条总结一、问题 带滚动条的弹窗中的地图正常显示,滚轮缩放位置发生偏移,放大时位置是靠上偏移的,缩小时位
带滚动条的弹窗中的地图正常显示,滚轮缩放位置发生偏移,放大时位置是靠上偏移的,缩小时位置是靠下偏移的, 高德地图、腾讯地图不存在此问题,百度地图存在
是由于百度地图默认定位是取浏览器文档对象的scrollTop=0的位置, 是由body中心为中心点的, 如果html页面(或者是弹窗)出现滚动条,那么地图的中心位置其实是有偏移的,偏移的距离就是滚动条滚动的距离。这个时候缩放就会出现上述偏移的情况。
禁止滚轮缩放, 添加百度地图缩放控件
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(); // 添加比例尺控件
效果:
添加缩放效果
在弹窗打开的时候,检查滚轮位置是否在最顶部,如果不在的话,调整到最顶部,然后在弹窗关闭的时候,恢复到最初的位置即可。
解决方法可参考:
调节滚动条位置-解决方案
到此这篇关于js百度地图鼠标滚轮缩放导致地图中心点偏移问题的文章就介绍到这了,更多相关js百度地图缩放内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: js百度地图鼠标滚轮缩放导致地图中心点偏移问题
本文链接: https://www.lsjlt.com/news/196073.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0