销毁传单地图麻烦

Question

我一次使用多个传单地图。它们可以动态创建和删除。但是当使用 map.remove() 销毁地图时，就会出现内存泄漏。出现分离的 DOM 树。您可以在 Chrome Dev Tools 中看到它。

有泄漏的截图。

我用来重新创建 div 和 map 的示例函数：

var map, mapDiv;
recreateMap = function(){
    // destroy previous map and div
    if(map) map.remove();
    if(mapDiv) mapDiv.parentNode.removeChild(mapDiv);
    // create new map div
    var randomDivId = 'mapId' + new Date().getTime();
    mapDiv = document.createElement('div');
    mapDiv.id = randomDivId;
    mapDiv.style.height = '200px';
    mapDiv.style.width = '200px';
    document.getElementsByTagName('body')[0].appendChild(mapDiv);
    // attach map to div
    map = L.map(randomDivId).setView([51.505, -0.09], 13);  
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
    map.invalidateSize();
};

这里的工作示例。

如何正确销毁传单地图？

Answer 1

假设您使用以下内容创建传单地图

var lat =39, long = 40;
var coords=[lat,long];
var zoomLevel=13;

var mapInstance = leafLet.map(mapContainerId).setView(coords, zoomLevel);

您可以使用以下代码删除它

if (mapInstance && mapInstance.remove) {
  mapInstance.off();
  mapInstance.remove();
}

如果您正在使用非阻塞 javascript 代码或异步调用，如果需要，您可以使用计时器来确保您的代码不会出错。以下是相同的示例实现

var timeoutIndex=0;
var watcher=window.setInterval(function(){
  timeoutIndex++;
  if (mapInstance && mapInstance.remove) {
      mapInstance.off();
      mapInstance.remove();
      window.clearInterval(watcher);
  }
  if(timeoutIndex >50) {  //wait for 5 seconds before giving up
      window.clearInterval(watcher);
  }  
},100);

它对我有用。猜猜它对你也有帮助

Answer 2

也许先尝试unload映射？（文档说使用方法时地图会自动卸载，remove但值得再试一次并首先尝试手动卸载）