脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js百度地图缩放

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百度地图缩放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论