我最近开发了一个 html5 移动应用程序。该应用程序是一个页面，其中导航哈希更改事件替换了整个 DOM。该应用程序的一部分是使用 API v3 的 Google Map。在从 DOM 中删除地图 div 之前，我想删除所有事件处理程序/侦听器并释放尽可能多的内存，因为用户可能不会再次返回该部分。
销毁地图实例的最佳方法是什么？
【问题讨论】：
标签： javascript google-maps-api-3
我在这个问题上添加了第二个答案，因为我不想删除我们通过后续 cmets 对我之前的答案的来回。
但我最近发现了一些直接解决您的问题的信息，所以我想分享一下。我不知道您是否知道这一点，但在 Google Maps API Office Hours May 9 2012 Video 期间，来自 Google 的 Chris Broadfoot 和 Luke Mahe 讨论了来自 stackoverflow 的这个问题。如果您将视频播放设置为 12:50，那是他们讨论您问题的部分。
基本上，他们承认这是一个错误，但也补充说他们并不真正支持涉及创建/销毁连续地图实例的用例。他们强烈建议创建地图的单个实例并在任何此类场景中重用它。他们还谈到将地图设置为 null，并明确删除事件侦听器。您表达了对事件监听器的担忧，我认为只需将地图设置为 null 就足够了，但看起来您的担忧是有效的，因为它们特别提到了事件监听器。他们还建议完全删除包含地图的 DIV。
无论如何，只是想传递这个并确保它包含在 stackoverflow 讨论中，并希望它对您和其他人有所帮助-
【讨论】：
official answer 是你不知道的。单页应用程序中的地图实例应该被重用，而不是被销毁然后重新创建。
对于某些单页应用程序，这可能意味着重新构建解决方案，以便地图一旦创建，它可能会被隐藏或与 DOM 断开连接，但永远不会被销毁/重新创建。
【讨论】：
显然你不能真正销毁地图实例，如果
正在保留一个地图实例池。 池跟踪正在使用的实例，当它被请求一个新实例时，它会检查是否有任何可用的地图实例是空闲的：如果是，它将返回一个现有的实例，如果不是，它将创建一个新的地图实例并将其返回，将其添加到池中。这样，您将只有最大数量的实例等于您在屏幕上同时显示的最大地图数量。 我正在使用这段代码（它需要 jQuery）：
var mapInstancesPool = {
pool: [],
used: 0,
getInstance: function(options){
if(mapInstancesPool.used >= mapInstancesPool.pool.length){
mapInstancesPool.used++;
mapInstancesPool.pool.push (mapInstancesPool.createNewInstance(options));
} else {
mapInstancesPool.used++;
}
return mapInstancesPool.pool[mapInstancesPool.used-1];
},
reset: function(){
mapInstancesPool.used = 0;
},
createNewInstance: function(options){
var div = $("<div></div>").addClass("myDivClassHereForStyling");
var map = new google.maps.Map(div[0], options);
return {
map: map,
div: div
}
}
}
您将起始地图选项传递给它（根据 google.maps.Map 构造函数的第二个参数），它会返回地图实例（您可以在其上调用与 google.maps.Map 相关的函数）和container ，您可以使用“myDivClassHereForStyling”类对其进行样式设置，并且可以动态地附加到 DOM。 如果需要重置系统，可以使用 mapInstancesPool.reset()。它将计数器重置为 0，同时将所有现有实例保留在池中以供重用。 在我的应用程序中，我需要一次删除所有地图并创建一组新地图，因此没有回收特定地图实例的功能：您的里程可能会有所不同。 为了从屏幕上移除地图，我使用了 jQuery 的 detach，它不会破坏地图的容器。
通过使用这个系统，并使用
google.maps.event.clearInstanceListeners(window);
google.maps.event.clearInstanceListeners(document);
正在运行
google.maps.event.clearInstanceListeners(divReference[0]);
divReference.detach()
（其中 divReference 是从实例池返回的 div 的 jQuery 对象） 在我删除的每个 div 上，我设法使 Chrome 的内存使用量或多或少保持稳定，而不是每次我删除地图并添加新地图时它都会增加。
【讨论】：
我会建议删除地图 div 的内容并在保存对地图的引用的变量上使用 delete，并可能明确地 deleteing 任何事件侦听器。
虽然有an acknowledged bug，但这可能不起作用。
【讨论】：
delete 增加了很多（见stackoverflow.com/q/742623/1314132），但它真的不会受到伤害。最后，归结为这个问题：是否有对对象的引用？如果是，则不会被垃圾回收。
GUnload() 删除所有 API 的内部引用。
delete 并不是真正的解决方案。他们必须修复大问题，以便使引用无法访问，或者添加一个新函数来提供您为GUnload() 描述的功能。
delete 并清除innerHTML 并不能完全清除内存。不幸的是，这不是一个高优先级的错误。
由于 google 没有为 api v3 提供 gunload()，因此最好在 html 中使用 iframe 并将 map.html 作为该 iframe 的源。使用后将 src 设为 null。这肯定会释放 map 消耗的内存。
【讨论】：
当您移除div 时，即移除显示面板并且地图将消失。要删除地图实例，只需确保您对地图的引用设置为null，并且对地图其他部分的任何引用设置为null。届时，JavaScript 垃圾收集将负责清理，如：How does garbage collection work in JavaScript? 中所述。
【讨论】：
null，还包括对其他任何内容的任何引用。因此，如果标记引用设置为null，使其无法访问，则无法访问事件侦听器。它可能仍然连接到地图，但无法到达地图，所以它只是一大块内存，基本上已经成为孤儿。与设置Array.length = 0 相同；如果没有其他对成员的引用，它们只会形成一组有资格进行垃圾回收的孤立内存。
我猜你说的是addEventListener。当您删除 DOM 元素时，某些浏览器会泄漏这些事件并且不会删除它们。这就是为什么 jQuery 在删除元素时会做几件事的原因：
removeEventListener 时删除事件。这意味着它会使用它在此元素上添加的事件侦听器来保存一个数组。addEventListener 不可用时，它使用 DOM 元素上的 delete 删除有关事件的属性（onclick、onblur 等）（仍然有一个数组来存储添加的事件）。 null 以避免 IE 6/7/8 内存泄漏。【讨论】：
removeEventListener 或delete 手动添加和删除事件数组。