javascript Google Maps JS v3 - 分离的 DOM 树 - 内存泄漏?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21142483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 20:11:40  来源:igfitidea点击:

Google Maps JS v3 - detached DOM tree - memory leak?

javascriptgoogle-mapsdomgoogle-maps-api-3memory-leaks

提问by rickyduck

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:

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

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();

}

The only things that reference leftMapor window.mapin my whole code is:

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

For window.map

为了 window.map

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);

For leftMap

为了 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);

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

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

enter image description here

在此处输入图片说明

(Right click - open image to see full size)

(右键单击 - 打开图像查看完整尺寸)

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

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

回答by TMS

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

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

They reproduce the issueby creating a simple loop that creates and destroys the google.mapsobject. See

他们通过创建一个创建和销毁对象的简单循环来重现该问题google.maps。看

http://jsfiddle.net/KWf4r/

http://jsfiddle.net/KWf4r/

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

按开始后,您将观察浏览器在内存中的增长,直到您按停止。

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:

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

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.

通过手动销毁谷歌地图创建的许多元素(并删除侦听器),我实际上设法找到了一个半可行的修复方法。但是,我使用了很多未记录的内容来执行此操作(我必须检查 chrome 检查器以查看要尝试删除的内容),因此这似乎不是正确的方法。