欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

百度地图滚轮缩放时产生位置偏移 问题

程序员文章站 2022-07-09 21:58:01
最近在调用百度地图的过程中,发生了在地图上滚轮缩放,结果产生了位置偏移的情况,同样在移动端,双指缩放也有同样的问题。 这个问题产生的原因主要是因为百度地图加载的位置因为定位等原因,与整个html 页面产生了不同步滚动的问题。 百度地图的缩放是基于body层的,如果body层有滚动条,并且不在最顶端, ......

最近在调用百度地图的过程中,发生了在地图上滚轮缩放,结果产生了位置偏移的情况,同样在移动端,双指缩放也有同样的问题。

 

这个问题产生的原因主要是因为百度地图加载的位置因为定位等原因,与整个html 页面产生了不同步滚动的问题。

百度地图的缩放是基于body层的,如果body层有滚动条,并且不在最顶端,在当前位置插入了百度地图,也就是出现该问题时的状态,这个时候滚轮缩放就会产生偏移。

 

那么知道了该问题产生的原因,解决办法就会有很多。

这里提供了我在项目中的处理办法。

当地图加载的时候执行

$(window).scrollTop(0);

也就是将父元素滚动到页面最顶端,因为产生问题都是因为position:fixed; 所以就算滚动到最顶端,地图也会加载在视图中,之后缩放就正常了。

同样的,在关闭加载地图的时候要将视图位置滚回之前所在的位置,这里我直接大约算了一下距离滚了回去

$(window).scrollTop(1000);//1000就是约等于之前视图所在位置距页面最顶端的距离

 

这个问题就算是解决了。

这里提供的不是最优解决办法,只是一种思路,有其他解决办法欢迎留言意见,谢谢!