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.调节滚动条

在弹窗打开的时候，检查滚轮位置是否在最顶部，如果不在的话，调整到最顶部，然后在弹窗关闭的时候，恢复到最初的位置即可。
解决方法可参考:
调节滚动条位置-解决方案

总结