卸载谷歌地图 API？答案

【问题标题】：Unload Google Maps API?卸载谷歌地图 API？
【发布时间】：2012-07-11 18:57:00
【问题描述】：

我有一个使用 ajax 加载子页面的主页，其中一个子页面包含谷歌地图，因此它使用 <script> 标签加载谷歌地图 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 对象，即清理所有内容并返回原始状态。有没有办法做到这一点？

【问题讨论】：

“当我点击主页中的不同链接时” --- 嗯，接下来会发生什么？如果该链接只是打开另一个页面 - 那么浏览器会卸载所有内容（只要页面不再存在）

标签： ajax google-maps jquery google-maps-api-3

【解决方案1】：

使用原生 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()
    }
  })
}

【讨论】：

【解决方案2】：

老问题..但这是我的解决方案：

// 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。

【讨论】：

之后你能重新初始化你的地图吗？我不断收到这个：未捕获的类型错误：无法读取未定义的属性“transclude”
您可以使用 Google Loader (developers.google.com/loader) 或直接附加脚本标签 (developers.google.com/maps/documentation/javascript/examples/…)
这真的一点用都没有，我只是想知道你按照自己的方式卸载地图后是否可以使用地图。我可以使用您的代码卸载地图，但是当我再次加载地图时，路线列表已损坏。
卸载后不能使用以前的地图参考或相关对象。您必须重新加载 api 并再次在回调中创建和配置地图。
这对我有用，我没有使用 earthbuilder.google... 而是使用：fonts.gstatic.com

【解决方案3】：

您的问题的答案实际上比您想象的要复杂一些。处理许多相关细节的好问题和一组答案位于：What is the Proper Way to Destroy a Map Instance?。

我不确定您的问题，但听起来您可能已经创建了一个多次加载 Google Maps API 的页面（或者可能，取决于用户的选择），您应该完全避免这种情况。谷歌承认存在与重新加载地图相关的内存泄漏错误，并强烈建议不要多次重新加载地图。 Google 本质上不支持多个地图加载用例。

查看上面包含的问题链接中提供的一些信息；它包含一些很好的讨论和信息。

针对@Engineer 的评论进行编辑：

查看Google Maps API Office Hours May 9 2012 Video，来自 Google 的 Chris Broadfoot 和 Luke Mahe 讨论过：他们不支持涉及重新加载地图的用例，API 只打算加载一次，并且他们承认存在内存泄漏错误。将播放设置为 ~12:50 以查看有关破坏地图、重新加载地图的问题以及他们为避免问题提供的建议的部分。首先，如果您必须隐藏然后显示地图，他们建议重用单个地图实例。

【讨论】：

"Google admits there are memory leak bugs associated with reloading the map" 非常有趣。你可以发布链接吗？谢谢
@Engineer 我已经为我的答案添加了一个链接；这绝对很有趣，视频包含很好的信息。
感谢@SeanMickey，视频非常有用。

【解决方案4】：

不是你想的那样。完成此操作的最简单方法是使用iframe 来加载应用程序的“重”部分。然后，当您摆脱 iframe 时，您就摆脱了与地图关联的 CSS 和 JS。

在第 2 版中，Google Maps API 有一个 GUnload() 调用，但第 3 版 API 没有这个调用。

【讨论】：