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百度地图缩放内容请搜索编程宝库以前的文章，希望以后支持编程宝库！

首先从简单的讲一下两者的区别 useCallback和useMemo的区别基本使用 // 贴上代码片利于复制 import { React, useState, u ...