破坏传单地图的麻烦

Posted 2021-04-13

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

Screenshot with a leak.

我用来创建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.

如何正确销毁传单地图？

答案

假设您使用以下内容创建传单映射

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

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

另一答案

也许先尝试unload地图？ （文档说使用remove方法时会自动卸载地图，但是值得给出额外的镜头并尝试先手动卸载它）

另一答案

如果您有多个地图，则需要将每个地图放入不同的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;
    }
}

希望这个帮助;）

另一答案

我遇到了同样的问题，在花了很多时间之后，这个问题的最佳解决方案是将地图容器放在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>

在我的情况下，map.remove()或map.unload()不起作用。