5

ajaxを使用してサブページをロードするメインページがあり、これらのサブページの1つにGoogleマップが含まれているため、<script>タグを使用してGoogleマップAPIをロードします。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">

これにより、メインページとサブページの両方に大量のcssファイルとjsファイルが読み込まれることに気付きました。メインページの別のリンクをクリックすると、これらのファイルをすべてアンロードして、作成されたjsオブジェクトをすべて削除できるようにします。つまり、すべてをクリーンアップして元の状態に戻します。これを行う方法はありますか？

4

4 に答える 4

3

あなたの質問への答えは、実際にはあなたが思っているよりも少し複雑です。関連する詳細の多くを扱う良い質問と一連の回答は次のとおりです。マップインスタンスを破棄する適切な方法は何ですか。。

あなたの質問からはわかりませんが、Google Maps APIを複数回ロードするページを作成した可能性があり（ユーザーの選択によっては可能性があります）、それを完全に回避する必要があります。Googleは、マップのリロードに関連するメモリリークのバグがあることを認めており、複数のマップのリロードを強くお勧めします。Googleは基本的に、複数のマップロードのユースケースをサポートしていません。

上記の質問リンクで入手できる情報のいくつかをチェックしてください。それはいくつかの良い議論と情報を含んでいます。

@Engineerのコメントに応じて編集：

GoogleのChrisBroadfootとLukeMaheが話し合うGoogleMapsAPI Office Hours 2012年5月9日の動画をご覧ください。地図の再読み込みを伴うユースケースはサポートされていないこと、APIは1回だけ読み込まれることを意図していること、そして彼らの謝辞メモリリークのバグがあること。再生を〜12：50に設定して、マップの破棄、マップのリロードに関する問題、および問題を回避するための提案に関するセクションを表示します。主に、マップを非表示にしてから表示する必要がある場合は、単一のマップインスタンスを再利用することをお勧めします。

于 2012-07-12T04:56:07.770 に答える
3

古い質問..しかし、ここに私の解決策があります：

// First getting rid of the google.maps object (to avoid memory leaks)
// Then, we are also removing google-maps related script tags we can identify.
// After unloaded, if maps is reloaded more than once on the same page; 
// we'll also get a warning in the console saying: "Warning: you have included the
// Google Maps API multiple times on this page. This may cause unexpected errors."
// This script will also avoid that warning.
if (window.google !== undefined && google.maps !== undefined) {
    delete google.maps;
    $('script').each(function () {
        if (this.src.indexOf('googleapis.com/maps') >= 0
                || this.src.indexOf('maps.gstatic.com') >= 0
                || this.src.indexOf('earthbuilder.googleapis.com') >= 0) {
            // console.log('removed', this.src);
            $(this).remove();
        }
    });
}

更新：これは完全な解決策ではないことに注意してください。コピー/複製/参照されたオブジェクトが存在する可能性があります。より良い方法は、iframe内のマップをサンドボックス化し、DOMからiframeを削除することです。

于 2013-09-20T16:10:40.233 に答える
1

あなたが考えている方法ではありません。これを実現する最も簡単な方法は、を使用しiframeてアプリケーションの「重い」部分をロードすることです。次に、をiframe削除すると、マップに関連付けられているCSSとJSが削除されます。

バージョン2ではGoogleMapsAPIにGUnload()呼び出しがありましたが、バージョン3APIにはこの呼び出しがありません。

于 2012-07-12T04:11:59.613 に答える
0

バニラJavaScriptを使用：

if (window.google?.maps) {
  delete google.maps

  document.querySelectorAll("script").forEach((script) => {
    if (
      script.src.includes("googleapis.com/maps") ||
      script.src.includes("maps.gstatic.com") ||
      script.src.includes("earthbuilder.googleapis.com")
    ) {
      script.remove()
    }
  })
}
于 2022-01-12T06:09:28.560 に答える