iOS移動應用中的Google Maps API v3問題

我們的iOS PhoneGap應用中的Google Maps API v3存在問題。iOS移動應用中的Google Maps API v3問題

有點歷史：我們使用Phonegap平臺構建了一個大型應用程序，因此大部分應用程序都是HTML5。我們在應用程序中廣泛使用Google Maps API v3。地圖在我們的應用程序中至少顯示11個頁面。應用程序體系結構是這樣的：在每次頁面轉換時，我們將刪除前一頁（它是主index.html上的DIV）的內容，並將其替換爲另一頁的內容，然後執行初始化頁面的腳本等等。

最初我們每次通過加載新頁面時初始化Google地圖：new google.maps.Map（...）;構造函數。然而，我們發現了一個嚴重的副作用 - 每個映射初始化時都有大量內存泄漏。通過Google搜索，我們發現這是一個已知問題，Google Maps API v3並非設計用於每頁超過一次初始化映射，並且映射不會泄漏內存，頁面重新加載是必要的，因此瀏覽器可以清理內存。但是，這個解決方案對我們來說不起作用，因爲這種重新初始化會破壞應用程序架構（一個頁面應用程序）。

因此，爲了防止內存泄漏並同時保留體系結構，我們決定將句柄存儲到包含映射的div，並且只需在頁面上重新輸入該句柄，當該頁面再次顯示時。因此，我們爲需要顯示地圖的頁面創建單個地圖實例，並且在顯示該頁面時，我們將帶初始化地圖的div附加到頁面上，設置地圖縮放，居中和觸發調整大小事件。

page.map.setZoom(14); 
page.map.setCenter(coordinates); 
google.maps.event.trigger(page.map, 'resize');

這很好用了一段時間。泄漏消失了，地圖被正確顯示了，但是，再一次，有一段時間......經過地圖之間的幾次轉換之後，地圖開始變得奇怪 - 當滾動地圖時，地圖停止刷新並加載圖像所以顯示灰色區域。同時，Google徽標和所有其他信息都顯示在正確的位置。標記也顯示在正確的地方。在瀏覽Safari Inspector時，我們可以看到應該顯示圖像的div不在地圖內。因此，我們懷疑在DOM操作（例如，當我們清除頁面內容並用新內容替換它）並恢復地圖之後，發生了子元素或其他事情發生的事情。

有沒有人有任何想法我們可以在這種情況下做什麼？

注意：我們能夠在移動Safari中重複相同的問題，但不能在桌面版Safari或Chrome中重複使用。

下面是使用該應用一段時間後會發生什麼的屏幕截圖。

Example 1 Example 2 enter image description here

來源

2013-01-16 Denis Mazourick

如果我理解正確的問題，resize事件需要在pageshow觸發。這是一個縮寫功能。

 $("div[id=maps]").bind("pageshow", function (e, data) { 
      google.maps.event.trigger(map, "resize"); 

     });

總是有興趣尋找不同的解決方案... http：// jsfiddle。net/wptc/y6Kpb/

來源

2013-01-16 19:20:29 cSco

正如我在文章中指出的那樣，當頁面顯示時我們觸發了resize事件 –

沒錯，但是我發現事件的時間是一個問題。在縮放和居中之前，可以嘗試將調整大小作爲第一件事情嗎？ – cSco

我們會嘗試。謝謝 –

iOS移動應用中的Google Maps API v3問題

回答

相關問題