javascript - 数据切换选项卡不下载传单 map

Question

我正在使用选项卡来显示清晰的内容，但其中一个停止下载很好，因为它位于数据切换选项卡中。这是一张传单 map 。这是代码:

---

导航栏代码:

<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>

map 在我将其放入选项卡之前显示良好，有人知道为什么它现在不起作用吗？谢谢 =)

Answer 1

欢迎来到 SO!

如果您的 Leaflet map 在您调整浏览器窗口大小后突然正常工作，然后您遇到经典的“ map 容器大小在 map 初始化时无效”:为了正常工作，Leaflet 在您初始化 map 时读取 map 容器大小(L.map("mapContainerId")).

如果您的应用程序隐藏了该容器(通常通过 CSS display: none;，或某些框架选项卡/模态/其他......)或稍后更改其尺寸，Leaflet 将不会知道新尺寸.因此它不会正确呈现。通常，它只会为它认为已显示的那部分容器下载切片。对于在 map 初始化时完全隐藏的容器，这可以是左上角的单个图 block 。

在可能使用流行框架(Bootstrap、Angular、Ionic 等)将 map 容器嵌入“选项卡”或“模态”面板时，经常会出现此错误。

Leaflet 监听浏览器窗口调整大小事件，并在发生时再次读取容器大小。这解释了为什么 map 突然在调整窗口大小时起作用。

您也可以通过调用 map.invalidateSize() 手动触发此更新当显示选项卡面板时(例如，在单击选项卡按钮时添加监听器)，至少在第一次以正确尺寸呈现容器时。

至于实现选项卡按钮点击监听器，请针对该主题对 SO 执行新搜索:对于大多数流行的框架，您应该有足够的资源来处理这个问题。