js百度地图鼠标滚轮缩放导致地图中心点偏移问题

目录

• 一、问题
• 二、问题分析
• 三、解决方法
• 1.禁止滚轮缩放, 添加缩放控件
• 2.调节滚动条
• 总结

一、问题

带滚动条的弹窗中的地图正常显示，滚轮缩放位置发生偏移，放大时位置是靠上偏移的，缩小时位置是靠下偏移的, 高德地图、腾讯地图不存在此问题，百度地图存在

二、问题分析

是由于百度地图默认定位是取浏览器文档对象的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百度地图缩放内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！