目錄
提出問題
<!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;
}
}
}結語
解決方案僅僅是拋轉引玉，若大家有更好的解決方法，歡迎分享和評論，謝謝。