卸载Google Maps API？

Question

我有一个主页面，使用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对象，即清除所有内容并返回原始状态。是否有任何方法可以做到这一点？

- Charlotte Tan

---

当我在我的主页上点击不同的链接时，如果该链接只是打开另一个页面，则浏览器会卸载所有内容（只要页面不再存在）。 - zerkms

Answer 1

这是一个老问题..但是这里有我的解决方案：

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

- Onur Yıldırım

---

你能在之后重新初始化你的地图吗？我一直得到这个错误：Uncaught TypeError: Cannot read property 'transclude' of undefined。 - unexist

你可以使用Google Loader（https://developers.google.com/loader/）或直接添加脚本标签（https://developers.google.com/maps/documentation/javascript/examples/map-simple-async） - Onur Yıldırım

卸载后，您不能使用先前的地图引用或相关对象。您必须重新加载API并在回调函数中创建和配置地图。 - Onur Yıldırım

这对我起作用了，我没有使用earthbuilder.google...而是使用了：fonts.gstatic.com。 - Flakx

@Dorian 请另外发布一个答案，而不是编辑这个。 - Onur Yıldırım

Answer 2

你的问题的答案实际上比你想象的要复杂一些。一个很好的问题和回答集，涉及到许多相关细节，可以在此链接中找到：What is the Proper Way to Destroy a Map Instance?。

我不确定从你的问题中听起来，但它似乎你创建了一个页面，加载了多次Google Maps API（或者根据用户选择可能会这样做），你应该避免这种情况。谷歌承认，重新加载地图存在内存泄漏bug，并强烈建议不要多次重新加载地图。Google基本上不支持多个地图加载的用例。

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

根据@Engineer的评论进行编辑：

请查看Google Maps API Office Hours May 9 2012 Video，其中Chris Broadfoot和Luke Mahe从谷歌讨论：他们不支持涉及重新加载地图的用例，API仅旨在加载一次，并且他们承认存在内存泄漏bug。将回放设置为约12:50查看有关销毁地图、重新加载地图存在的问题以及他们提供的避免问题的建议。主要是，如果必须隐藏并显示地图，则建议重用单个地图实例。

- Sean Mickey

---

“Google承认重新加载地图存在内存泄漏错误”非常有趣。您能发布链接吗？谢谢。 - Engineer

@工程师 我已经在我的回答中添加了一个链接；它绝对是有趣的，视频包含了很好的信息。 - Sean Mickey

谢谢@SeanMickey，这个视频非常有用。 - Engineer

Answer 3

不是你想的那样。实现这个最简单的方法是使用一个iframe来加载应用程序中的“重”部分。然后，当你摆脱了iframe时，你就会摆脱与地图相关的CSS和JS。

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

- Anthony Mills

Answer 4

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

- Dorian