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

【问题标题】：Data-toggle tab does not download Leaflet map数据切换选项卡不下载传单地图
【发布时间】：2016-07-14 19:06:04
【问题描述】：

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

导航条码：

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

在我将其放入选项卡之前，该地图已经显示得很好，有人知道为什么它现在不起作用吗？谢谢=)

【问题讨论】：

标签： javascript twitter-bootstrap tabs toggle leaflet

【解决方案1】：

欢迎来到 SO！

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

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

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

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

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

至于实现选项卡按钮单击侦听器，请针对该主题在 SO 上执行新搜索：对于大多数流行的框架，您应该有足够的可用资源。

【讨论】：

正是我遇到的问题，谢谢！
@Ned，请在您的问题中附上修复代码和map.invalidateSize()
嗨，我添加了 map.invalidateSize() 但它给了我错误：无法读取未定义的属性“_leaflet_pos”，知道为什么吗？
嗨@akshayKishore，请随时提出一个新问题，详细说明您的具体问题。
谢谢，现在有道理了！现在工作完美。在我的情况下，我使用带有“显示：无”的地图 div 来隐藏它。（传单地图的javascript是一个名为initialize（）的函数，所以我可以单独调用它）。因此，链接该取消隐藏地图以进行全屏调用： object.style.display: 'block';初始化（）;然后首先可见，然后在初始化地图并在手机上以全屏模式运行。

【解决方案2】：

首先，感谢@ghybs 很好地解释了为什么在这些情况下没有正确显示传单地图。

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

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

正如@MarsAndBack 所说，此修复可能会导致 Leaflet 的 invalidateSize 提供的平移/动画/等功能出现问题。

【讨论】：

这是一个方便的修复方法，但是您会错过 Leaflet 的 invalidateSize 提供的平移/动画/等功能。

【解决方案3】：

我有这个问题是因为我使用了modal bootstarp。无论如何它都没有解决。我试过map.invalidateSize() 和window.dispatchEvent(new Event('resize')); 但没有修复。

最终解决这个问题：

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

'shown.bs.modal' 事件意味着当模态完全加载并且大小没有任何混淆时，现在在里面写你的代码。

【讨论】：

【解决方案4】：

对于像我这样的人无法通过宝贵的@ghybs 解释 (map.invalidateSize()) 来解决挑战，并且能够通过 @gangai-johann 来解决问题，您仍然有机会以正确的方式解决问题.将您的无效指令放在 setTimeout 中，因为发送该指令可能为时过早。

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

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

【讨论】：