时间戳

首页 > 解决方案 > 从 dom -vuejs 中删除传单地图时禁用平移

vue.js - 从 dom -vuejs 中删除传单地图时禁用平移

问题描述

我的 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 Uncaught TypeError: Cannot read property 'offsetWidth' of null at getSizedParentNode (leaflet-src.js?e11e:2558) at NewClass._onDown (leaflet-src.js?e11e:5902) at 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);

这会导致相同的错误。

标签： vue.jsleafletinnerhtmlremovechildpanning

解决方案

这似乎完全取代了传单地图，没有错误......

  $("#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 的子项。

推荐阅读