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

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

---

导航条码：

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

$（文档）.ready（函数（）{
var map=新的L.map（'carteBenef'）；
var cloudmadeUrl='http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png'，
子域=['otile1'、'otile2'、'otile3'、'otile4']，
cloudmadeAttrib=‘由和贡献者提供的数据、图像和地图信息’；
var cloudmake=new L.TileLayer（cloudmadeeurl，{maxZoom:18，attribute:cloudmadeAttrib，subdomains:subdomains}）；
var iades=新L.LatLng（）
map.addLayer（CloudMake）.setView（iades，15）；
var benefLocation=新的L.LatLng（）；
var benef=新的L.标记（benefLocation）；
map.addLayer（benef）；
benef.bindPopup（“”.openPopup（）；
});

地图在我把它放进标签之前就已经出现了，有人知道为什么它现在不工作了吗？谢谢=）

欢迎来到SO

如果在调整浏览器窗口大小后，突然正常工作，则您会遇到经典的“地图初始化时地图容器大小无效”：为了正常工作，手册会在初始化地图时读取地图容器大小（

L.map（“mapContainerId”）

）

如果您的应用程序隐藏该容器（通常通过CSS

display:none；

，或某些框架选项卡/modal/which…）或稍后更改其尺寸，传单将不会知道新的尺寸。因此，它将无法正确渲染。通常，它只下载它认为显示的容器的一小部分。对于在贴图初始化时完全隐藏的容器，这可以是左上角的单个平铺

当将贴图容器嵌入到“选项卡”或“模式”面板中时，可能会使用流行的框架（引导、角度、离子等）出现此错误

传单将侦听浏览器窗口调整大小事件，并在事件发生时再次读取容器大小。这就解释了为什么贴图会突然改变窗口大小

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

---

至于实现tab按钮click listener，请在该主题上执行新的搜索：对于大多数流行的框架，您应该有足够的资源来解决这个问题。

首先，感谢@ghybs对传单地图在这些情况下无法正确显示的原因所作的解释

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

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

---

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

我遇到此问题是因为我使用了

模式
引导程序。而且它也没有解决。我尝试了
map.invalidateSize（）
和
window.dispatchEvent（新事件（'resize'））但不是固定的

最后，它通过以下方式固定：

$（'#map modal'）.on（'show.bs.modal'，function（event）{}）

'show.bs.modal'
事件的意思是当modal完全加载且大小没有任何混乱时，现在就在里面编写代码。
对于像我这样的人来说，他们无法用宝贵的@ghybs解释（
map.invalidateSize（）
）来解决这个挑战，并且能够用@gangai johann one来完成，你仍然有机会用正确的方法做这件事。将invalidate指令放在setTimeout内，因为分派该指令可能为时过早

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

有关详细说明，请参阅答案。
这正是我遇到的问题，谢谢@Ned，请将带有
map.invalidateSize（）
的修复代码附加到您的问题中嗨，我添加了map.invalidateSize（），但它给了我一个错误：无法读取未定义的属性“\u传单\u pos”，知道为什么吗？嗨@akshayKishore，请随意打开一个新问题，提供您具体问题的详细信息。这是一个方便的修复，然而，你们将错过传单的invalidateSize提供的平移/动画/等功能。