最近在調用百度地圖的過程中,發生了在地圖上滾輪縮放,結果產生了位置偏移的情況,同樣在移動端,雙指縮放也有同樣的問題。 這個問題產生的原因主要是因為百度地圖載入的位置因為定位等原因,與整個html 頁面產生了不同步滾動的問題。 百度地圖的縮放是基於body層的,如果body層有滾動條,並且不在最頂端, ...
最近在調用百度地圖的過程中,發生了在地圖上滾輪縮放,結果產生了位置偏移的情況,同樣在移動端,雙指縮放也有同樣的問題。
這個問題產生的原因主要是因為百度地圖載入的位置因為定位等原因,與整個html 頁面產生了不同步滾動的問題。
百度地圖的縮放是基於body層的,如果body層有滾動條,並且不在最頂端,在當前位置插入了百度地圖,也就是出現該問題時的狀態,這個時候滾輪縮放就會產生偏移。
那麼知道了該問題產生的原因,解決辦法就會有很多。
這裡提供了我在項目中的處理辦法。
當地圖載入的時候執行
$(window).scrollTop(0);
也就是將父元素滾動到頁面最頂端,因為產生問題都是因為position:fixed; 所以就算滾動到最頂端,地圖也會載入在視圖中,之後縮放就正常了。
同樣的,在關閉載入地圖的時候要將視圖位置滾回之前所在的位置,這裡我直接大約算了一下距離滾了回去
$(window).scrollTop(1000);//1000就是約等於之前視圖所在位置距頁面最頂端的距離
這個問題就算是解決了。
這裡提供的不是最優解決辦法,只是一種思路,有其他解決辦法歡迎留言意見,謝謝!