js百度地圖滾輪縮放所在點(diǎn)偏移問題解決
提出問題
<!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" 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); ? ? //開啟鼠標(biāo)滾輪縮放? ? ? ? ? ? ? ? ? ? ? this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); ?// 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別 ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? }, ? ? ? ? }, ? ? ? ? beforeDestroy: function () { ? ? ? ? ? ? this.map = null ? ? ? ? } ? ? }) </script>
分析問題
運(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>
上述代碼添加了開啟和關(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; } } }
結(jié)語
到此這篇關(guān)于js百度地圖滾輪縮放所在點(diǎn)偏移問題解決的文章就介紹到這了,更多相關(guān)js百度地圖滾輪縮放 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序?qū)崿F(xiàn)點(diǎn)擊生成隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊生成隨機(jī)驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09js實(shí)現(xiàn)簡單模態(tài)窗口,背景灰顯
昨天中午做項(xiàng)目需要一個(gè)模態(tài)窗口,想起上一個(gè)公司的項(xiàng)目經(jīng)理曾經(jīng)做過一個(gè)比較牛的模態(tài)窗口,至今沒用搞清楚實(shí)現(xiàn)原理,平時(shí)也沒有時(shí)間去分析,試著自己做了一個(gè),用了一天的時(shí)間終于完成了,給大家一起分享, 也希望高手多提意見。第一次在博客園上發(fā)文章,挺高興的。2008-11-11微信小程序?qū)崿F(xiàn)左右列表聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左右列表聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02調(diào)試Javascript代碼(瀏覽器F12及VS中debugger關(guān)鍵字)
目前,常用的瀏覽器IE、Chrome、Firefox都有相應(yīng)的腳本調(diào)試功能下面我就介紹如何在瀏覽器/VS中調(diào)試我們的JS代碼,感興趣的你可不要走開啊,希望本文對你有所幫助2013-01-01js原生實(shí)現(xiàn)移動(dòng)端手指滑動(dòng)輪播圖效果的示例
下面小編就為大家分享一篇js原生實(shí)現(xiàn)移動(dòng)端手指滑動(dòng)輪播圖效果的示例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01javascript作用域鏈與執(zhí)行環(huán)境詳解
這篇文章主要為大家詳細(xì)介紹了javascript作用域鏈與執(zhí)行環(huán)境,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03