5

我有一个使用 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 对象，即清理所有内容并返回原始状态。有没有办法做到这一点？

4

4 回答 4

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 回答
3

The answer to your question is actually a bit more complicated than you might think. A good question and set of answers that deal with many of the related details are at: What is the Proper Way to Destroy a Map Instance?.

I'm not sure from your question, but it sounds like you may have created a page that loads the Google Maps API more than one time (or could, depending on user choices) and you should avoid that entirely. Google admits there are memory leak bugs associated with reloading the map and strongly recommends against multiple map reloads. Google essentially does not support multiple map load use cases.

Check out some of the information available at the question link included above; it contains some good discussion and information.

EDIT in Response to @Engineer's Comment:

Check out the Google Maps API Office Hours May 9 2012 Video where Chris Broadfoot and Luke Mahe from Google discuss: that they don't support use cases that involve reloading the map, that the API is intended to be loaded only once, and their acknowledgement that there is a memory leak bug. Set the playback to ~12:50 to view the section about destroying the map, problems with reloading the map, and suggestions they offer to avoid problems. Primarily, if you must hide and then show a map, they recommend reusing a single map instance.

于 2012-07-12T04:56:07.770 回答
1

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

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

于 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 回答