Leaflet 销毁传单地图麻烦

我一次使用几张传单地图。它们可以动态创建和删除。但是当使用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();
};

---

如何正确销毁传单地图？

可能先尝试

卸载

地图？（文档说明使用

remove

方法时地图会自动卸载，但值得再进行一次拍摄并尝试先手动卸载）

我也遇到了同样的问题，在花了很多时间之后，解决这个问题的最佳方法是将地图容器放在

div

中，如果要重新生成地图，请删除所有

div

的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>

$（“#地图框”）.html（“”）；
$（“#地图框”）.html（“”）；
//映射初始化代码

---

在我的例子中，

map.remove（）

或

map.unload（）

不起作用。

如果有多个映射，则需要将每个映射放入不同的变量中

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

---

希望这有帮助；）

假设您创建了一个包含以下内容的传单地图

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

---

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

在我的情况下，这会导致一张空白地图，我不确定它是否可以work@user3821178最好的方法是删除所有层，然后调用map上的remove方法，然后用null填充map变量。如何删除所有层？@user3821178

map.eachLayer（函数（层）{map.removeLayer（层）；}）卸载函数