js百度地圖鼠標滾輪縮放導致地圖中心點偏移問題
更新時間：2023年02月14日 16:18:19 作者：菑恩_
本文主要介紹了js百度地圖鼠標滾輪縮放導致地圖中心點偏移問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
一、問題
帶滾動條的彈窗中的地圖正常顯示，滾輪縮放位置發(fā)生偏移，放大時位置是靠上偏移的，縮小時位置是靠下偏移的, 高德地圖、騰訊地圖不存在此問題，百度地圖存在
二、問題分析
是由于百度地圖默認定位是取瀏覽器文檔對象的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(); //禁止鼠標滾輪縮放
mapCanvas.addControl(scaleCtrl);
//平移縮放控件
mapCanvas.addControl(new BMap.NavigationControl());
var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
效果:
添加縮放效果
2.調(diào)節(jié)滾動條
在彈窗打開的時候，檢查滾輪位置是否在最頂部，如果不在的話，調(diào)整到最頂部，然后在彈窗關(guān)閉的時候，恢復到最初的位置即可。
解決方法可參考:
調(diào)節(jié)滾動條位置-解決方案
總結(jié)
到此這篇關(guān)于js百度地圖鼠標滾輪縮放導致地圖中心點偏移問題的文章就介紹到這了,更多相關(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文件預覽的7種方案與性能對比,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下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ù)組常用方法(附上相應的用法及示例)
這篇文章主要給大家介紹了關(guān)于JavaScript中Array數(shù)組常用方法,文中附上相應的用法及示例,需要的朋友可以參考下2024-01-01
下面的一個例子就是以獨立函數(shù)寫出的JavaScript日期格式化函數(shù)，獨立的format函數(shù)。回到格式化的這一知識點上，我們考查的是怎么實現(xiàn)的、運用了哪些原理2014-01-01
這篇文章詳細介紹了js中prototype用法及實例，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了JavaScript反射與依賴注入,結(jié)合實例形式較為詳細的分析了JavaScript反射與依賴注入的概念、原理、定義、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2018-05-05