传单地图未填写区域

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

在我的 header 中，我将地图的样式设置如下：

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

为了避免重复 post，我尝试使用以下 post 的答案但无济于事：

地图仍然没有填满整个区域。

我需要进行哪些调整才能确保地图填满整个区域？

Answer 1

您走在正确的轨道上 - 对 invalidateSize() 的调用需要在包含地图的元素可见之后进行 - 这大概是这样的

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

Answer 2

我添加了以下模态命令并将函数调用放入其中：

$('#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()：

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

现在地图填满了整个区域。

传单地图未填写区域

Leaflet map not filling area

php

maps

jquery

leaflet

map-api