js百度地图鼠标滚轮缩放导致地图中心点偏移问题
菑恩_ 人气:0一、问题
带滚动条的弹窗中的地图正常显示,滚轮缩放位置发生偏移,放大时位置是靠上偏移的,缩小时位置是靠下偏移的, 高德地图、腾讯地图不存在此问题,百度地图存在
二、问题分析
是由于百度地图默认定位是取浏览器文档对象的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.调节滚动条
在弹窗打开的时候,检查滚轮位置是否在最顶部,如果不在的话,调整到最顶部,然后在弹窗关闭的时候,恢复到最初的位置即可。
解决方法可参考:
调节滚动条位置-解决方案
总结
加载全部内容