Php 未填充区域的单张地图

我用传单制作了一个按钮点击不同的地图，但地图并没有填满整个地区

click事件获取存储在我的数据库中并发送到datatable中页面的各种经度和纬度

单击按钮的外观如下所示：

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

$（'#datatable'）。在（'click'，'tr>td>a.mapClick'，函数（e）
{
e、 预防默认值（）；
var-rampName=$（this.attr（'data-rampName'）；
var delName=$（this.attr（'data-delName'）；
var-actramplat=parseFloat（$（this.attr（'data-actramplat'））；
var-actrampng=parseFloat（$（this.attr（'data-actrampng'））；
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）；
初始映射（rampName、delname、actramplat、actramplng、actdellat、actdellng）；
$（'#mapModal'）.modal（'show'）；
}); 
函数初始化映射（rampName、delname、actramplat、actramplng、actdellat、actdellng）
{
//dispatchEvent（new Event（'resize'）；您走对了轨道-调用
invalidateSize（）
需要在包含映射的元素变为可见之后进行-大概是这样的

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

我添加了以下模态命令并在其中抛出函数调用：

$('#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变量后添加了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);
}

函数初始化映射（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'{
属性：“”
}).addTo（地图）；
}

现在，地图占据了整个区域。
我尝试了你的建议。但是，地图只变大了2或3块。如果需要，我可以提供屏幕截图。有什么想法吗？
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);
}