销毁传单地图麻烦答案

【问题标题】：Destroy leaflet map trouble销毁传单地图麻烦
【发布时间】：2014-05-20 07:48:59
【问题描述】：

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

我用来重新创建 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();
};

Working example here.

如何正确销毁传单地图？

【问题讨论】：

标签： leaflet

【解决方案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);

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

【讨论】：

【解决方案2】：

如果你有几张地图，你需要把每张地图放到不同的var中。

var map1 = L.map(mapDiv1);
var map2 = L.map(mapDiv2);

您还可以创建一个函数来控制地图初始化和容器：

function BoolMapInit(map, mapDiv) {
    return (map != null && map._container.id == divMap);
}

以及删除现有地图的功能：

function RemoveExistingMap(map) {
    if (map != null) {
        map.remove();
        map = null;
    }
}

希望对您有所帮助；）

【讨论】：

【解决方案3】：

我也遇到了同样的问题，花了很多时间解决这个问题，最好的解决方法是将地图容器放在div中，当你想重新生成地图时，删除所有@987654322 @'s HTML 并创建一个新的地图容器：

<div id="map-bx">
   <div id="map"></div>
</div>
<script type="text/javascript">
    // Map init
</script>

当你想像这样重新生成（销毁）地图时：

<script type="text/javascript">
    $("#map-box").html(""); 
    $("#map-box").html('<div id="map"></div>');
    // map init code
</script>

就我而言，map.remove() 或 map.unload() 不起作用。

【讨论】：

这在我的情况下导致空白地图不确定它是否可以工作
@user3821178 最好的方法是删除所有图层，然后在地图上调用remove方法，然后用null填充地图变量
如何删除所有图层？
@user3821178 map.eachLayer(function (layer) { map.removeLayer(layer); });
2022 年仍在工作。谢谢

【解决方案4】：

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

【讨论】：

无法再在地图实例上调用卸载函数