如何在HTML5單頁的應用程序

我不知道我在哪裏可以找到實現單頁應用谷歌地圖的最佳實踐使用谷歌地圖時來管理內存。目前我使用backbonejs和requirejs。

第一次加載頁面時，創建的標記數量只有兩個。第二次同樣的路線後，MarkerWithLabel對象的數量是雙重

同樣與其他谷歌地圖插件（參見下文）。

Overlapping Marker

還有什麼能做些什麼來刷新/處理/銷燬那些生活在JS內存中的對象？

UPDATE：這是我的代碼時，我啓動插件：

1）I聲明模塊內的全局變量

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

來源

2014-03-03 Muhaimin

顯然你面對的是骨幹中稱爲殭屍。這裏是一個偉大的文章，瞭解並避免這些http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/ – Salman

我已經管理視圖和基於@derickbailey的調查結果。 – Muhaimin

你有資源泄漏，就這麼簡單。 Google地圖不會管理您添加到地圖畫布上的標記和其他功能。管理它們取決於你。如果您分享如何使用MarkerWithLabel和標記spidifer的示例代碼，我們可以幫助您找到泄漏。 –

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

好吧終於我成功地通過摧毀聽衆來減少數量。希望這個幫助

來源

2014-03-04 06:10:21 Muhaimin

如何在HTML5單頁的應用程序

回答

相關問題