jQuery и Leaflet выдают ошибку «контейнер карты уже инициализирован»

Question 1

Примечание: я старался не дублировать этот вопрос. Я безрезультатно пытался использовать ответы из предыдущих сообщений.

Я все время получаю сообщение об ошибке:

Uncaught Error: Map container is already initialized.

Используя следующий код:

$('#example1').on('click', 'tr > td > a.loadMap', function(e) 
{
  e.preventDefault();
  var $dataTable = $('#example1').DataTable();
  var tr = $(this).closest('tr');
  var data = $dataTable.rows().data();

  var actramp = $(this).attr('data-actramp');
  var actimpdel = $(this).attr('data-actimpdel');   
  var actramplat = parseFloat($(this).attr('data-actramplat'));
  var actramplng = parseFloat($(this).attr('data-actramplng'));
  var actdellat = parseFloat($(this).attr('data-actdellat'));
  var actdellng = parseFloat($(this).attr('data-actdellng'));
  var actreclat = parseFloat($(this).attr('data-actreclat')); 
  var actreclng = parseFloat($(this).attr('data-actreclng')); 

  $('#actionMatchbackModal').modal('show');

  $("#actionMatchbackModal").on("shown.bs.modal", function () {
    initMap(actramp, actimpdel, actexpreceipt, actramplat, actramplng, actreclat, actreclng, actdellat, actdellng); 
  });
});

function initMap(actramp, actimpdel, actexpreceipt, actramplat, actramplng, actreclat, actreclng, actdellat, actdellng)
{
  var map = L.map('map').setView([actreclat,actreclng], 8);

  // vvv this was an answer provided from another post vvv
  if (map != undefined) {
    map.remove();
  }
  // ^^^ but the map stopped loading completely ^^^

  map.invalidateSize();

  L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=zAlHsNvo6jxv4ENZxW3R', {
    attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
  }).addTo(map);
}

Что я могу добавить / удалить из приведенного выше кода, чтобы исправить ошибку «контейнер карты уже инициализирован»?

javascript jquery leaflet maps

0

John Beasley 28 Окт 2019 в 16:08

Как бы то ни было, каждый раз, когда вы нажимаете example1, вызывается функция initMap. Возможно, вместо этого измените это на функцию обновления и обновите только местоположение и масштаб; т. е. используйте что-то вроде flyTo для изменения положения карты.

–

JDunken

28 Окт 2019 в 16:35

Answer

Вы находитесь в правильном направлении, но вам следует remove() карту перед (повторной) инициализацией ее - и убедиться в правильности области видимости переменной map. Как это

var map;

...

function initMap(actramp, actimpdel, actexpreceipt, actramplat, actramplng, actreclat, 
actreclng, actdellat, actdellng)
{

    if (map != undefined) map.remove();
    map = L.map('map').setView([actreclat,actreclng], 8);

    ...

}

2

peeebeee 28 Окт 2019 в 16:53

Question 2

Вы находитесь в правильном направлении, но вам следует remove() карту перед (повторной) инициализацией ее - и убедиться в правильности области видимости переменной map. Как это

var map;

...

function initMap(actramp, actimpdel, actexpreceipt, actramplat, actramplng, actreclat, 
actreclng, actdellat, actdellng)
{

    if (map != undefined) map.remove();
    map = L.map('map').setView([actreclat,actreclng], 8);

    ...

}

2

peeebeee 28 Окт 2019 в 16:53

jQuery и Leaflet выдают ошибку «контейнер карты уже инициализирован»

1 ответ

Похожие вопросы

Новые вопросы

javascript