百度地图滚轮缩放，所在点偏移问题
提出問題
<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); //開啟鼠標(biāo)滾輪縮放 this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級別})},},beforeDestroy: function () {this.map = null}})</script> 復(fù)制代碼分析問題
運(yùn)行上述代碼，會(huì)發(fā)現(xiàn)點(diǎn)擊第一個(gè)按鈕，彈窗中的地圖正常顯示，滾輪縮放位置也不會(huì)發(fā)生偏移。但是點(diǎn)擊第二個(gè)按鈕，彈窗中的地圖在滾輪縮放時(shí)，放大時(shí)位置是靠上偏移的，縮小時(shí)位置是靠下偏移的。為啥會(huì)出現(xiàn)這種現(xiàn)象，是不是所有在線地圖都有這個(gè)問題？幸運(yùn)的是，高德地圖、騰訊地圖不存在此問題，百度地圖偏偏有這個(gè)問題。
原因在于百度地圖默認(rèn)定位是取瀏覽器文檔對象的scrollTop=0的位置。如果文檔也就是html頁面出現(xiàn)滾動(dòng)條，當(dāng)你地圖不是在scrollTop=0的時(shí)候出現(xiàn)時(shí)，那么地圖的中心位置其實(shí)是有偏移的，偏移的距離就是滾動(dòng)條滾動(dòng)的距離。這個(gè)時(shí)候縮放就會(huì)出現(xiàn)上述偏移的情況。
解決問題
針對百度地圖的這種特殊設(shè)計(jì)，我們只好采取相應(yīng)對策。
<el-dialog :visible.sync="visible" title="地圖展示" @closed="mapClose" @open="mapOpen"><div id="allmap"></div> </el-dialog> 復(fù)制代碼上述代碼添加了開啟和關(guān)閉事件處理
我們只要在彈窗打開的時(shí)候，檢查滾輪位置是否在最頂部，如果不在的話，調(diào)整到最頂部，然后在彈窗關(guān)閉的時(shí)候，恢復(fù)到最初的位置即可。
貼上我的代碼：
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;}} } 復(fù)制代碼結(jié)語
解決方案僅僅是拋轉(zhuǎn)引玉，若大家有更好的解決方法，歡迎分享和評論，謝謝。
超強(qiáng)干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生總結(jié)
以上是生活随笔為你收集整理的百度地图滚轮缩放，所在点偏移问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 悲观锁和乐观锁和gap锁
- 下一篇： 大数据培训：Zookeeper集群管理与