In Google Maps v3, does removing a marker from memory automatically kill any listeners?_问答_开发者

In my Google Maps v3 app, I am Creating Markers and putting them on the map. For each, I am adding an event listener on 'click' so I can show an Info Window when a user clicks on them.

I am keeping my Markers in a javascript array and use .setMap() to show/hide them on the map. There are some cases where a user wants them deleted from the map. In this case I do marker.setMap(null) and then delete the marker from my array.

Is it recommended to also keep an array of the event listeners on the markers so I can remove those when I delete the marker? Or will t开发者_运维问答he event listener get removed from memory when it's listened-to object is removed from memory?

From an end-user standpoint, I don't think it matters to do this, but I am curious if the event listener is still in memory somewhere even though I delete the marker. I'd like to be as tidy as possible.

I don't know for sure if the listeners are removed, but my guess is not. My guess is that since the listener is still listening, even though you no longer have a reference to the object, the listener does, so it will remain in memory. You don't need to keep a reference to the listener, you can call

google.maps.event.clearInstanceListeners(marker);

to clear all listeners before you delete it from your array.

As far as I can tell, the listeners are removed from memory.

Theoretically, this is probably because the listeners don't actively listen as such - Google Maps only stores them in the relevant feature, and then asks that feature which listeners it has when an event is fired.

Practically, I ran a test, and these are the results:

Tabs 1 and 2 create a point with 20000 listeners, and track the listeners.
Tab 3 creates a point with 20000 listeners, but doesn't track them.
Stage 1 is after they've got the listeners.
Stage 2 is after they've dropped something (tab 1: point, 2: listeners, 3: point)
Stage 3 is after they've dropped the other (tab 1: listeners, 2: point, 3: no change (listeners dropped implicitly at stage 2) )
Tab     PID     Memory (live, K) at stage...
                1       2       3
1       4643    18194   16026    8265
2       4659    18174    8155    8227
3       4676    17750    8152    8202

Memory usage in JS is absurdly hard to track, partly (I suspect) because of the automatic garbage collector. To get these results I used chrome's built in task manager, and after each major step of the experiment cycled a large chunk of memory into and then out of use to force the garbage collector's hand.

One curiosity here is that when tab 1 drops the point, it loses about 2000K memory, while when tab 2 drops the point, it gains 77K (a negligible change given the volatility of memory usage). I suspect this is because tab 1 drops a point with 20000 listeners attached, while tab 2 drops a bare point.

Here's the source I used. I'm not providing a fiddle link, because fiddle just makes tracking memory usage even harder :/

html (insert your own API key):

<!DOCTYPE html>
<html>
        <head>
                <style type="text/css">
                        html, body {height: 100%; width: 100%;}
                        #map {width: 100%; height: 80%;}
                </style>
        </head>
        <body>
<h1>Welcome to MapLand, home of a single map.</h1>
<div id="map"></div>
<button onclick="addPts(true);">add points (store listeners)</button>
<button onclick="addPts(false);">add points (don't store listeners)</button>
--------
<button onclick="deletePts();">delete points</button>
<button onclick="deleteLs();">delete listeners</button>
-------- 
<button onclick="checkListenerVar();">check listener var</button>
<button onclick="cycleLargeChunk();">cycle large chunk</button>
        </body>
        <script src="test2.js"></script>
        <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAorBo-zMFJo9viqdv3pkuhMyg5hytpbaQ&callback=initMap"></script>
</html>

JS (test2.js):

var uluru = {lat: -25.363, lng: 131.044};
var map;
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: uluru
        });
}
var ptLat = uluru.lat, ptLng = uluru.lng;
var pts = []; // points
var ls = []; // listeners
var listenerVar;
function addPts(storeLs) {
        var m = new google.maps.Marker({
                position: {lat: ptLat, lng: ptLng},
                map: map
        });
        ptLng += 1;
        if (ptLng > uluru.lng + 20) {
                ptLng = uluru.lng;
                ptLat += 1;
        }
        pts.push(m);
        for (var i = 50000; i > 0; i--) {
                var l = google.maps.event.addListener(m, 'click', function () {listenerVar = i;});
                if (storeLs) ls.push(l);
        }
}
function deletePts() {
        for (var i = pts.length-1; i >= 0; i--) pts[i].setMap(null);
        pts = [];
        ptLat = uluru.lat;
        ptLng = uluru.lng;
}
function deleteLs() {
        for (var i = ls.length-1; i >= 0; i--) ls[i].remove();
        ls = [];
}
function checkListenerVar() {
        alert("Listener var is " + listenerVar + ", but is being reset to -1.");
        listenerVar = -1;
}
function cycleLargeChunk() {
        var l = [0];
        for (var i = 0; i < 26; i++) {
                l = l.concat(l);
        }
        //Force the environment to hang on to l for at least a second.
        setTimeout(function () {console.log(l.length);}, 1000);
}