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

好吧，我终于通过仅销毁监听器成功地减少了数量。希望这有帮助