本文详细解析了百度地图在网页弹窗（如Element UI Dialog）中使用时，因页面滚动导致滚轮缩放中心点发生视觉偏移的原因。通过监听弹窗的打开与关闭事件，动态调整文档滚动条位置至顶部再恢复，可有效解决该兼容性问题，确保地图交互体验正常。
提出问题
<!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" rel="external nofollow" >
<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;
}
}
}
结语
到此这篇关于js百度地图滚轮缩放所在点偏移问题解决的文章就介绍到这了,更多相关js百度地图滚轮缩放 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！