Question

我正在使用标签显示清晰的内容，但其中一个停止下载，因为它位于数据切换标签中。这是一张传单地图。这是代码：

Navbar代码：

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Données principales</a></li>
    <li><a data-toggle="tab" href="#carte">Carte</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">Lorem ipsum</div>
    <div id="carte" class="tab-pane fade"> **//see script below\\** </div>
</div>

脚本：

<div id="carteBenef"></div>
      <script type="text/javascript">
          $(document).ready(function () {
              var map = new L.Map('carteBenef');
              var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
                     subDomains = ['otile1', 'otile2', 'otile3', 'otile4'],
                     cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
              var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});
              var iades = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>)
              map.addLayer(cloudmade).setView(iades, 15);
              var benefLocation = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>);
              var benef = new L.Marker(benefLocation);
              map.addLayer(benef);
              benef.bindPopup("<?php echo htmlspecialchars($beneficiaire->nom) . ' ' . htmlspecialchars($beneficiaire->prenom); ?>").openPopup();
          });
      </script>

在我将其放入标签之前，地图显得很好，是否有人知道为什么它现在不起作用？谢谢=）

Answer 1

欢迎来到SO！

如果您的Leaflet map 在调整浏览器窗口大小后突然正常工作，那么您将体验到经典的“地图容器大小在地图初始化时无效”：为了正常工作，Leaflet初始化地图（L.map("mapContainerId")）时读取地图容器大小。

如果您的应用程序隐藏了该容器（通常通过CSS display: none;或某些框架选项卡/模态/等等......）或稍后更改其尺寸，Leaflet将不会知道新的大小。因此它无法正确呈现。通常，它仅为其认为显示的容器的分数下载切片。在容器的情况下，这可以是左上角的单个图块，在地图初始化时完全隐藏。

当将地图容器嵌入“tab”或“modal”面板时，可能会出现这种错误，可能使用流行的框架（Bootstrap，Angular，Ionic等）。

Leaflet侦听浏览器窗口调整大小事件，并在发生时再次读取容器大小。这解释了为什么地图突然适用于窗口大小调整。

您还可以在显示选项卡面板时调用map.invalidateSize()来手动触发此更新（例如，在选项卡按钮上单击时添加一个侦听器），至少在第一次使用正确的尺寸渲染容器时。 / p>

至于实现tab按钮点击监听器，在SO上对该主题执行新的搜索：对于大多数流行的框架，你应该有足够的可用资源。

Answer 2

首先，非常感谢@ghybs，为您解释为什么在这些情况下没有正确显示Leaflet地图。

对于那些尝试@ ghybs的答案失败的人，您应该尝试调整浏览器的大小，而不是调用地图对象的方法：

window.dispatchEvent(new Event('resize'));

这个修复对我有用，它应该适用于所有情况。

Answer 3

我有这个问题，因为我使用了modal bootstarp。而且还是没有解决。我尝试了map.invalidateSize()和window.dispatchEvent(new Event('resize'));，但没有解决。

最终通过此方法解决此问题：

$('#map-modal').on('shown.bs.modal', function(event) {});

'shown.bs.modal'事件表示现在完全在模式中加载模态，而大小上没有任何混淆了。

Answer 4

对于像我这样的人，他们无法通过宝贵的@ghybs解释（map.invalidateSize()来解决挑战，而无法通过@ gangai-johann做到这一点，那么仍然有机会正确的路。将您的无效指令放入setTimeout中，因为分派该指令可能为时过早。

setTimeout(() => {
    this.$refs.mymap.mapObject.invalidateSize()
}, 100)

有关详细说明，请参考https://stackoverflow.com/a/56364130/4537054答案。

Answer 5

@armani：动态（异步）填充模态时，它会更加复杂。在使用自定义睡眠功能初始化传单之前，我用监听器将其修复：

$('#map-modal').on('shown.bs.modal', function() {
  while($('#map').length == 0) {
    sleep(1000);
  }
  var map = new L.Map('map');
})

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

5 个答案: