从dom -vuejs删除传单地图时禁用Panning

Question

我的vuejs应用中有一张传单地图。用户更新搜索条件时，我需要刷新地图。

我注意到我的代码没有替换地图。相反，我的代码向现有地图添加了更多div。这是有问题的，因为它会干扰用户平移，并且还会使页面超载不必要的数据。

我已尝试以几种方式删除现有地图...

我当前的方法是这个...

 var container = L.DomUtil.get("leafletMapId");
  if (container != null) {
    while (container.firstChild) 
      container.removeChild(containerfirstChild);
    }
    container._leaflet_id = null;
  } else {
    console.log("container was null");
  }

  var myMap = L.map("leafletMapId", {
    layers: [streetTilesLayer],
    scrollWheelZoom: true
  }).setView(this.center, this.zoom);

这似乎有效地清空了地图div。但是，当我单击并尝试平移地图时，会导致错误：

leaflet-src.js？e11e：2558未捕获的TypeError：无法读取属性'offsetWidth'为null在getSizedParentNode（leaflet-src.js？e11e：2558）在NewClass._onDown（leaflet-src.js？e11e：5902）在HTMLDivElement.handler（leaflet-src.js？e11e：2679）

我也尝试过这个...

 var container = L.DomUtil.get("leafletMapId");
  if (container != null) {
    container.innerHTML = "";
    container._leaflet_id = null;
  } else {
    console.log("container was null");
  }

  var myMap = L.map("leafletMapId", {
    layers: [streetTilesLayer],
    scrollWheelZoom: true
  }).setView(this.center, this.zoom);

这将导致相同的错误。

Answer 1

这似乎完全没有错误地替换了传单地图...

  $("#leafletMapId").remove();
  var g = document.createElement("div");
  g.setAttribute("id", "leafletMapId");
  document.getElementById("main-div").appendChild(g);


  var myMap = L.map("leafletMapId", {
    layers: [streetTilesLayer],
    scrollWheelZoom: true
  }).setView(this.center, this.zoom);

其中ID为“ leafletMapId”的div是ID为“ main-div”的div的子级。