Google Maps JS v3 - 分离的 DOM 树 - 内存泄漏? [英] Google Maps JS v3 - detached DOM tree - memory leak?

问题描述

我有以下问题.我正在通过以下代码通过 setMap(null) 选项删除对谷歌地图实例的所有引用，包括标记:

I have the following issue. I am removing all references to a google maps instance including markers via the setMap(null) option via the following code:

destroyMaps = function () {
    leftMap = null;
    window.map = null;
    geocoder = null;
    for (var i=0; i<window.rightMarkers.length; i++) {
        window.rightMarkers[i].setMap(null);
        window.rightMarkers[i] = null;
    }
    window.rightMarkers = null;
    $("#map-canvas-right").remove();

    for (var i=0; i<window.leftMarkers.length; i++) {
        window.leftMarkers[i].setMap(null);
        window.leftMarkers[i] = null;
    }
    window.leftMarkers = null;
    $("#map-canvas-left").remove();

}

在我的整个代码中引用 leftMap 或 window.map 的唯一内容是:

The only things that reference leftMap or window.map in my whole code is:

var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: window.map,
                    icon: window.pins[keyword_category.category_name],
                    shadow: window.pins["Shadow"],

                    title:job.job_title
});
marker.job_type =  keyword_category.category_name;
window.rightMarkers.push(marker);

对于leftMap

var marker = new google.maps.Marker({
                position: myLatlng,
                map: leftMap,
                icon: window.pins[keyword_category.category_name],
                shadow: window.pins["Shadow"],

                title:job.job_title
 });
 window.leftMarkers.push(marker);

然而，在我分离的 DOM 树中，在地图创建之前/地图被销毁之后进行比较时，仍然是谷歌地图图块:

However in my detached DOM tree, when comparing before the maps were created / after they were destroyed, remains the google maps tiles:

(右击 - 打开图片查看完整尺寸)

(Right click - open image to see full size)

我该怎么做才能找出导致此 DOM 泄漏的原因?

What can I do to find out what's causing this DOM leak?

推荐答案

这是 Google Maps API v3 中的一个已知问题 - 即使是纯创建和销毁 google.maps 对象(不创建标记)导致内存泄漏.请参阅问题 3803:错误:破坏 Google 地图实例从不释放内存.

This is a known issue in Google Maps API v3 - even pure creation and destruction of google.maps object (no marker creation) results in memory leak. See Issue 3803: Bug: Destroying Google Map Instance Never Frees Memory.

他们通过创建一个简单的循环来创建和销毁 google.maps 对象.见

They reproduce the issue by creating a simple loop that creates and destroys the google.maps object. See

http://jsfiddle.net/KWf4r/

按下开始后，您会观察到浏览器在内存中不断增长，直到按下停止.

After pressing start, you will observe your browser to grow in memory until you press stop.

该问题尚未解决，并且似乎没有可用的官方解决方法.当然有一种方法，但它不是一个干净的解决方法，显然可能会在谷歌地图 api 的下一个版本中停止工作 - 引用 讨论:

The issue is not fixed and there doesn't seem to be an official workaround available. There is certainly a way, but it's not a clean workaround that apparently might stop working in next release of google maps api - citing the discussion:

我实际上已经通过手动找到了一个半可行的修复破坏了谷歌地图创建的许多元素(和删除侦听器).但是，我使用了很多未记录的东西要做到这一点(我必须检查 chrome 检查器以查看要尝试的内容删除)，所以这似乎不是正确的方法.

I've actually managed to find a semi-workable fix by manually destroying a lot of the elements that google maps creates (and removing listeners). However, I am using a lot of undocumented things to do this (I had to check in the chrome inspector to see what to try to remove), so this doesn't seem the right way to go.

这篇关于Google Maps JS v3 - 分离的 DOM 树 - 内存泄漏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！