如何在html5单页面应用程序上使用谷歌地图时管理内存

Question

我不知道在哪里可以找到在单页面应用程序上实现谷歌地图的最佳实践。目前我使用的是backbonejs和requirejs。

首次加载页面时，创建的标记数量仅为两个。在第二次击中相同路线后， MarkerWithLabel 对象的数量是双倍

与其他谷歌地图插件相同（参见下文）。

我还能做些什么来刷新/处置/销毁生活在JS内存中的那些对象？

更新：这是我启动插件时的代码：

1）我在模块

中声明了一个全局变量

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

2）以下代码在模块中的另一个功能

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）我尝试使用

进行处理

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

Answer 1

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 = [];
}

好吧最后我通过仅破坏监听器来成功减少数量。希望这个帮助