iOS PhoneGap アプリの Google Maps API v3 に問題があります。
ちょっとした歴史: Phonegap プラットフォームを使用して大規模なアプリを作成したことがあるため、アプリのほとんどは HTML5 です。私たちのアプリケーションでは、Google Maps API v3 を広く利用しています。マップは、アプリ内の少なくとも 11 ページに表示されます。アプリケーション アーキテクチャは、ページ遷移ごとに前のページのコンテンツ (メインの index.html の DIV) を削除し、それを別のページのコンテンツに置き換えてから、ページなどを初期化するスクリプトを実行するようなものです。 .
最初は、新しいページが読み込まれるたびに Google マップを初期化していました: new google.maps.Map(...); コンストラクタ。ただし、マップの初期化ごとに大量のメモリ リークが発生するという重大な副作用が発見されました。グーグルで調べたところ、これは既知の問題であり、Google Maps API v3 はページごとに複数回マップを初期化するようには設計されておらず、マップがメモリをリークしないようにするには、ブラウザがメモリをクリーンアップできるようにページのリロードが必要であることがわかりました。ただし、このような再初期化はアプリケーション アーキテクチャ (シングル ページ アプリ) を破壊するため、この解決策はうまくいきません。
そのため、メモリ リークを防ぎ、同時にアーキテクチャを維持するために、map を含む div へのハンドルを保存し、そのページが再び表示されたときに、そのハンドルをページに再入力することにしました。そのため、地図を表示する必要があるページ用に単一の地図インスタンスを作成し、そのページが表示されたら、初期化された地図を含む div をページに追加し、地図のズーム、中央を設定し、サイズ変更イベントをトリガーします。 .
page.map.setZoom(14);
page.map.setCenter(coordinates);
google.maps.event.trigger(page.map, 'resize');
これはしばらくの間うまく機能します。リークはなくなり、マップは正しく表示されますが、もう一度、しばらくの間... マップのあるページ間で数回遷移した後、マップが奇妙に動作し始めます - マップをスクロールすると、マップの更新と画像の読み込みが停止します灰色の領域が表示されます。同時に、Google ロゴとその他すべての情報が正しい場所に表示されます。マーカーも正しい場所に表示されます。Safari Inspector を見ると、画像を表示する div がマップ内にないことがわかります。そのため、DOM 操作 (ページ コンテンツを消去して新しいコンテンツに置き換える場合など) とマップの復元後に、子要素に何かが発生するか、別のことが発生すると考えられます。
この状況で何ができるか考えている人はいますか？
注: Mobile Safari では同じ問題を再現できましたが、デスクトップ バージョンの Safari または Chrome では再現できませんでした。
以下は、アプリをしばらく使用した後のスクリーン ショットです。
