次の問題があります。次のコードでsetMap(null)
オプションを使用して、マーカーを含むgoogle mapsインスタンスへのすべての参照を削除しています:
destroyMaps = function () {
leftMap = null;
window.map = null;
geocoder = null;
for (var i=0; i<window.rightMarkers.length; i++) {
window.rightMarkers[i].setMap(null);
window.rightMarkers[i] = null;
}
window.rightMarkers = null;
$("#map-canvas-right").remove();
for (var i=0; i<window.leftMarkers.length; i++) {
window.leftMarkers[i].setMap(null);
window.leftMarkers[i] = null;
}
window.leftMarkers = null;
$("#map-canvas-left").remove();
}
私のコード全体でleftMap
またはwindow.map
を参照するのは、次のものだけです。
window.map
var marker = new google.maps.Marker({
position: myLatlng,
map: window.map,
icon: window.pins[keyword_category.category_name],
shadow: window.pins["Shadow"],
title:job.job_title
});
marker.job_type = keyword_category.category_name;
window.rightMarkers.Push(marker);
leftMap
var marker = new google.maps.Marker({
position: myLatlng,
map: leftMap,
icon: window.pins[keyword_category.category_name],
shadow: window.pins["Shadow"],
title:job.job_title
});
window.leftMarkers.Push(marker);
しかし、私の切り離されたDOMツリーでは、マップが作成される前/破棄された後で比較すると、Googleマップのタイルが残ります。
(右クリック-画像を開いてフルサイズで表示)
このDOMリークの原因を特定するにはどうすればよいですか?
これは、Google Maps API v3の既知の問題です。google.maps
オブジェクトの純粋な作成と破棄(マーカーの作成なし)でも、メモリリークが発生します。 問題3803を参照してください:バグ:Googleマップインスタンスを破棄してもメモリが解放されない。
問題を再現google.maps
オブジェクトを作成して破棄する単純なループを作成します。見る
スタートを押した後、ストップを押すまでブラウザがメモリ内で成長するのを観察します。
この問題は修正されておらず、正式な回避策はないようです。確かに方法はありますが、Google Maps APIの次のリリースで動作を停止する可能性があるという明確な回避策ではありません- ディスカッション :
私は実際に、グーグルマップが作成する多くの要素を手動で破棄する(そしてリスナーを削除する)ことにより、ある程度実行可能な修正を見つけることができました。しかし、私はこれを行うために文書化されていない多くのことを使用しています(chromeインスペクタをチェックして何を削除しようとするかを確認する必要がありました)。これは正しい方法ではないようです行く。