문제

MarkerWithLabel

I dont know where else can i find best practise for implement google map on single page application. Currently I use backbonejs coupled with requirejs.

Upon page loaded for the first time, the number of marker created is only two. After hit the same route for the second time, the number of MarkerWithLabel object is double

Same goes to with other google map plugin (refer below).

Overlapping Marker

What else can I do to refresh/dispose/destroy those objects living in the JS memory?

UPDATE: Here is my code when i initiate the plugin:

1) I declare a global variable within the module

var $markers      = [],
    gm            = google.maps,
    iconWithColor = new google.maps.MarkerImage('./img/marker.svg', null, null, null, new google.maps.Size(25,25));

2) Code below is in another function within the module

var that = this;
require(["markerclusterer","markerwithlabel"], function () {
    _.each(coordinates.models, function(val, i) {
    var latLng = new gm.LatLng(val.get('in_latitude'), val.get('in_longitude')),
    marker = new MarkerWithLabel({
        position: latLng,
        draggable: false,
        raiseOnDrag: true,
        map: that.map,
        labelContent: val.get('ig_label'),
        labelAnchor: new gm.Point(22, 0),
        labelClass: 'label',
        bgColour: colors,
        animation: gm.Animation.DROP,
        icon: iconWithColor,
        shadow: shadow
    });
    $markers.push(marker);
    gm.event.addListener(marker, 'click', function() {
        var new_marker = this;
        if(prev_marker) {
           if (prev_marker.getAnimation() != null) {                
           prev_marker.setAnimation(null);                              
           new_marker.setAnimation(gm.Animation.BOUNCE);
           prev_marker = new_marker;
           }
        } else {
           new_marker.setAnimation(gm.Animation.BOUNCE);
           prev_marker = new_marker;
        }
        that.map.panTo(latLng);
    }); 
    }, this);
});

3) I try to dispose by using

if($markers) {
    for (var i = 0; i < $markers.length; i++ ) {                    
    //console.log($markers[i]);
    $markers[i].setMap(null);
    delete $markers[i];
    }               
    $markers = [];
}   
if (markerCluster) {
    markerCluster.clearMarkers();
    markerCluster = null;
}
도움이 되었습니까?

해결책

if($markers) {
    for (var i = 0; i < $markers.length; i++ ) {                    
      //console.log($markers[i]);
      google.maps.event.clearInstanceListeners($markers[i]);
      $markers[i].setMap(null);
      delete $markers[i];
    }               
    $markers = [];
}

ok finally i successfully reduce number by destroying the listener only. Hope this help

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top