2

我正在使用 Leaflet 通过单击按钮生成不同的地图，但地图并没有填满整个区域。

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

按钮单击如下所示：

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

为了防止重复发布，我尝试使用以下帖子中的答案无济于事：

数据切换选项卡不下载传单地图

地图继续没有填满整个区域。

为了确保地图填满整个区域，我需要进行哪些调整？

4

2 回答 2

1

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

$('#mapModal').modal('show');
map.invalidateSize();
于 2019-10-24T17:28:30.537 回答
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 变量后添加了 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);
}

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

于 2019-10-24T19:23:11.387 回答