js百度地圖鼠標(biāo)滾輪縮放導(dǎo)致地圖中心點偏移問題
更新時間：2023年02月14日 16:18:19 作者：菑恩_
本文主要介紹了js百度地圖鼠標(biāo)滾輪縮放導(dǎo)致地圖中心點偏移問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、問題
帶滾動條的彈窗中的地圖正常顯示，滾輪縮放位置發(fā)生偏移，放大時位置是靠上偏移的，縮小時位置是靠下偏移的, 高德地圖、騰訊地圖不存在此問題，百度地圖存在
二、問題分析
是由于百度地圖默認(rèn)定位是取瀏覽器文檔對象的scrollTop=0的位置, 是由body中心為中心點的, 如果html頁面(或者是彈窗)出現(xiàn)滾動條，那么地圖的中心位置其實是有偏移的，偏移的距離就是滾動條滾動的距離。這個時候縮放就會出現(xiàn)上述偏移的情況。
三、解決方法
1.禁止?jié)L輪縮放, 添加縮放控件
禁止?jié)L輪縮放, 添加百度地圖縮放控件
mapCanvas = new BMap.Map("mapBox", { enableMapClick: false });
var point = new BMap.Point(116.379341, 39.938776);
mapCanvas.centerAndZoom(point, 15);
//彈窗中帶有滾動條 縮放會存在中心點偏移問題
mapCanvas.disableScrollWheelZoom(); //禁止鼠標(biāo)滾輪縮放
mapCanvas.addControl(scaleCtrl);
//平移縮放控件
mapCanvas.addControl(new BMap.NavigationControl());
var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
效果:
添加縮放效果
2.調(diào)節(jié)滾動條
在彈窗打開的時候，檢查滾輪位置是否在最頂部，如果不在的話，調(diào)整到最頂部，然后在彈窗關(guān)閉的時候，恢復(fù)到最初的位置即可。
解決方法可參考:
調(diào)節(jié)滾動條位置-解決方案
總結(jié)
到此這篇關(guān)于js百度地圖鼠標(biāo)滾輪縮放導(dǎo)致地圖中心點偏移問題的文章就介紹到這了,更多相關(guān)js百度地圖縮放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了Bootstrap3下拉菜單的實現(xiàn)方法，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-02-02
JavaScript?在開發(fā)過程中可能會出現(xiàn)很多奇怪的問題。這篇文章主要為大家整理了一些JavaScript中奇怪的問題及解決方法，感興趣的可以了解一下2023-03-03
前端實現(xiàn)PDF文件預(yù)覽的7種方案與性能對比詳解
這篇文章主要為大家詳細(xì)介紹了前端實現(xiàn)PDF文件預(yù)覽的7種方案與性能對比,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
首先請下載JScript.chm這本手冊，無論新手老手，有一本手冊是免不了的，特別是對于新手，如果你沒有空翻犀牛書，那么這本手冊將是你了解這門語言的首選。下面所講的大多數(shù)，手冊上可以沒有提及，或提及很少的內(nèi)容。2008-07-07
這篇文章主要介紹了js實現(xiàn)簡單折疊、展開菜單的方法,涉及javascript動態(tài)操作頁面元素變換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
上傳文件時,選擇了文件后想清空文件路徑，經(jīng)搜索發(fā)現(xiàn)個不錯的方法在此與大家分享下，感興趣的朋友不要錯過2013-10-10
JavaScript中Array數(shù)組常用方法(附上相應(yīng)的用法及示例)
這篇文章主要給大家介紹了關(guān)于JavaScript中Array數(shù)組常用方法,文中附上相應(yīng)的用法及示例,需要的朋友可以參考下2024-01-01
JavaScript自定義日期格式化函數(shù)詳細(xì)解析
下面的一個例子就是以獨(dú)立函數(shù)寫出的JavaScript日期格式化函數(shù)，獨(dú)立的format函數(shù)?；氐礁袷交倪@一知識點上，我們考查的是怎么實現(xiàn)的、運(yùn)用了哪些原理2014-01-01
這篇文章詳細(xì)介紹了js中prototype用法及實例，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了JavaScript反射與依賴注入,結(jié)合實例形式較為詳細(xì)的分析了JavaScript反射與依賴注入的概念、原理、定義、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2018-05-05