首页  编辑  

百度地图页面滚动后鼠标滚轮缩放显示不正确的完美解决方法

Tags: /计算机文档/网页制作/   Date Created:
百度地图API有个BUG,就是如果页面滚动后,那么鼠标滚轮缩放会显示不正确,有偏移。
原因是百度地图的缩放是基于body层的,如果body层有滚动条,并且不在最顶端,在当前位置插入了百度地图,也就是出现该问题时的状态,这个时候滚轮缩放就会产生偏移。
网上有人用缩放的时候页面自动滚动到开始,然后结束缩放时重新滚动到老位置的方法,可以解决,但是比较恶心。
https://blog.csdn.net/weixin_33898233/article/details/91375068?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase

下面的代码,可以完美解决问题且100%不会偏移,正确无误差纠正偏移:
// 下面代码解决页面滚动后,完美解决百度地图鼠标滚轮缩放不正确的问题
// 百度地图地图鼠标滚轮缩放是按照页面顶端为0计算的,所以如果页面滚动后不正确缩放了
// 原理是通过计算当前滚动鼠标时所在经纬度的平面坐标偏移差来纠正
// 稍微有个小缺点,就是动画滚动效果会刷两次,要使用ViewOptions禁用动画效果就更好了
if ($(document).scrollTop() > 0) {   // 仅在页面滚动后使用下面的纠正功能
	var p;  // 当前鼠标所在经纬度
	var sp; // 当前鼠标所在经纬度平面坐标
	map.addEventListener("mousemove",function(e){
		p = e.point;
		sp = map.pointToPixel(p);
	});
	map.addEventListener("zoomend",function(e){
		// 获取缩放后的老经纬度的新的平面坐标
		var new_sp = map.pointToPixel(p);
		var dx = new_sp.x - sp.x// 偏移量X
		var dy = new_sp.y - sp.y// 偏移量Y
		map.panBy(-dx, -dy);  	   // 重新纠正,把老的经纬度重新显示在新屏幕坐标的原来的X,Y位置处
	});
}