Листовка не заполнена

Question

Я использую Leaflet для создания различных карт одним нажатием кнопки, но карта не заполняет всю область.

Событие щелчка захватывает различные долготы и широты, которые были сохранены в моей базе данных и отправлены на страницу в виде данных.

Нажатие кнопки выглядит следующим образом:

$('#datatable').on('click', 'tr > td > a.mapClick', function(e)
{
  e.preventDefault();
  var rampName = $(this).attr('data-rampname');
  var delName = $(this).attr('data-delname');
  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'));

  $('#rampName').val(rampName);
  $('#delname').val(delName);
  $('#actramplat').val(actramplat);
  $('#actramplng').val(actramplng);
  $('#actdellat').val(actdellat);
  $('#actdellng').val(actdellng);

  initMap(rampName, delname, actramplat, actramplng, actdellat, actdellng); 

  $('#mapModal').modal('show');
}); 

function initMap(rampName, delname, actramplat, actramplng, actdellat, actdellng)
{
  //window.dispatchEvent(new Event('resize')); <-- tried this
  //map.invalidateSize(); <-- also tried this

  var map = L.map('map').setView([actreclat,actreclng], 8);

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

В своем заголовке я разработал карту следующим образом:

<style>
  height:275px;
  width:100%;
</style>

В попытке предотвратить дублирование поста я попытался использовать ответы из следующего поста, но безрезультатно:

Вкладка «Переключатель данных» не загружает карту Leaflet

Карта продолжает НЕ заполнять всю область.

Какие корректировки мне нужны, чтобы карта полностью заполнила всю картуобласть

Answer 1

Я добавил следующую модальную команду и бросил в нее вызов функции:

$('#datatable').on('click', 'tr > td > a.mapClick', function(e)
{
  e.preventDefault();
  var rampName = $(this).attr('data-rampname');
  var delName = $(this).attr('data-delname');
  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'));

  $('#rampName').val(rampName);
  $('#delname').val(delName);
  $('#actramplat').val(actramplat);
  $('#actramplng').val(actramplng);
  $('#actdellat').val(actdellat);
  $('#actdellng').val(actdellng);

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

  // added below modal function
  $("#actionMatchbackModal").on("shown.bs.modal", function () {
    initMap(rampName, delname, actramplat, actramplng, actdellat, actdellng); 
  });
}); 

Затем, внутри фактической функции, я добавил map.invalidateSize () после создания переменной map:

function initMap(rampName, delname, actramplat, actramplng, actdellat, actdellng)
{
  var map = L.map('map').setView([actreclat,actreclng], 8);
  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);
}

Теперь карта заполняет всю область.

Answer 2

Вы на правильном пути - вызов invalidateSize() должен быть выполнен после того, как элемент, содержащий карту, сделан видимым - что, вероятно, похоже на это

$('#mapModal').modal('show');
map.invalidateSize();