百度地图滚轮缩放，所在点偏移问题

最新推荐文章于 2024-05-23 11:01:45 发布

lyuharvey

最新推荐文章于 2024-05-23 11:01:45 发布

阅读量2.4k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://juejin.im/post/5b864e08e51d4538e0190206

版权

提出问题

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的ak"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<style type="text/css">
		[v-cloak] {
			display: none;
		}

		#allmap {
			width: 600px;
			height: 600px;
			left: 180px;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}
	</style>
	<title>地图展示</title>
</head>

<body>
	<div id="container" v-cloak>
		<div>
			<el-button @click="openMap">Button</el-button>
		</div>
		<div style="margin-top:1000px;">
			<el-button @click="openMap">Button</el-button>
		</div>

		<el-dialog :visible.sync="visible" title="地图展示">
			<div id="allmap"></div>
		</el-dialog>
	</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

</html>

<script type="text/javascript">
	new Vue({
		el: '#container',
		data: function () {
			return {
				visible: false,
				map: null
			}
		},
		mounted: function () {
		},
		methods: {
			openMap: function () {
				this.visible = true;
				this.$nextTick(function () {
					const map = new BMap.Map("allmap");
					this.map = map
					//添加地图类型控件
					this.map.addControl(new BMap.MapTypeControl({
						mapTypes: [
							BMAP_NORMAL_MAP,
							BMAP_HYBRID_MAP
						]
					}));
					this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放 
					this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
				})
			},
		},
		beforeDestroy: function () {
			this.map = null
		}
	})

</script>
复制代码

分析问题

运行上述代码，会发现点击第一个按钮，弹窗中的地图正常显示，滚轮缩放位置也不会发生偏移。但是点击第二个按钮，弹窗中的地图在滚轮缩放时，放大时位置是靠上偏移的，缩小时位置是靠下偏移的。为啥会出现这种现象，是不是所有在线地图都有这个问题？幸运的是，高德地图、腾讯地图不存在此问题，百度地图偏偏有这个问题。

原因在于百度地图默认定位是取浏览器文档对象的scrollTop=0的位置。如果文档也就是html页面出现滚动条，当你地图不是在scrollTop=0的时候出现时，那么地图的中心位置其实是有偏移的，偏移的距离就是滚动条滚动的距离。这个时候缩放就会出现上述偏移的情况。

解决问题

针对百度地图的这种特殊设计，我们只好采取相应对策。

<el-dialog :visible.sync="visible" title="地图展示" @closed="mapClose" @open="mapOpen">
	<div id="allmap"></div>
</el-dialog>
复制代码

上述代码添加了开启和关闭事件处理

我们只要在弹窗打开的时候，检查滚轮位置是否在最顶部，如果不在的话，调整到最顶部，然后在弹窗关闭的时候，恢复到最初的位置即可。

贴上我的代码：

mapOpen: function () {
	this.top = this.getScrollTop()
	if (this.top) {
		this.setScrollTop(0)
	}
},
mapClose: function () {
	this.setScrollTop(this.top);
	this.top = 0;
}
getScrollTop: function () {
	let scrollTop = 0;
	if (document.documentElement && document.documentElement.scrollTop) {
		scrollTop = document.documentElement.scrollTop;
	} else if (document.body) {
		scrollTop = document.body.scrollTop;
	}
	return scrollTop;
},
setScrollTop: function (top) {
	if (!isNaN(top)) {
		if (document.documentElement && document.documentElement.scrollTop !== undefined) {
			document.documentElement.scrollTop = top;
		} else if (document.body) {
			document.body.scrollTop = top;
		}
	}
}
复制代码

结语

解决方案仅仅是抛转引玉，若大家有更好的解决方法，欢迎分享和评论，谢谢。

lyuharvey

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
百度地图滚轮缩放，所在点偏移问题

提出问题<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=n...
复制链接

扫一扫