Панорамирование отключено при удалении листовки с карты - vuejs - PullRequest
Новая
       21

Панорамирование отключено при удалении листовки с карты - vuejs

1 голос
/ 31 января 2020

В моем приложении vuejs есть листовка. Мне нужно обновить sh мою карту, когда пользователи обновляют свои условия поиска.

Я заметил, что мой код не заменяет карту. Вместо этого мой код добавляет больше div к существующей карте. Это проблематично c, потому что это мешает панорамированию пользователя, а также перегружает страницу нежелательными данными.

Я пытался удалить существующую карту несколькими способами ...

Мой текущий подход это ... 

 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-sr c. js? E11e: 2558 Uncaught TypeError: Невозможно прочитать свойство 'offsetWidth' из null в getSizedParentNode (leaflet-sr c. js? e11e: 2558) в NewClass._onDown (leaflet-sr c. js? e11e: 5902) в HTMLDivElement.handler (leaflet-sr c) . 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);

Это вызывает ту же ошибку.

Ответы [ 2 ]

1 голос
/ 01 февраля 2020

Это, кажется, полностью заменяет карту листовки без ошибок ... 

  $("#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);

, где этот div с идентификатором "leafletMapId" является дочерним элементом div с идентификатором "main-div".

0 голосов
/ 21 февраля 2020

Я боролся с этой проблемой в течение дня, и ответ, данный GNG, был единственным, который решил ее для меня. Мне пришлось объединить его ответ с другим, который я нашел, чтобы я мог каждый раз перезагружать свою карту с другим набором маркеров и при этом все еще иметь элементы управления панорамированием. Мой окончательный код такой: 

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


document.getElementById('map').innerHTML = `<div id="map" class="map map-home" style="height: 300px; margin-top: 50px"></div>`;
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttribution = 'Attribution',
        osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
var map = L.map('map').setView([latitud, longitud], 15).addLayer(osmLayer);
L.marker([latitud, longitud])
        .addTo(map)
        .bindPopup("mensaje")
        .openPopup();

Я публикую это не как ответ на исходный вопрос, а для дальнейшего комментирования ответа, данного GNG.

...