数据切换选项卡不会下载传单地图
我使用的标签来显示清晰的内容，但其中一个停止下载，因为它在数据切换选项卡。 这是一个传单地图。 这里是代码：
导航代码：
<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>
地图出现之前，我把它放在标签中，有人有一个想法，为什么现在不工作？ 谢谢=）
欢迎来到SO！
如果在调整浏览器窗口大小后，您的Leaflet地图 突然正常工作 ，那么您将体验到经典的“地图容器大小在地图初始化时无效”：为了正确工作，初始化地图时，Leaflet读取地图容器大小L.map("mapContainerId") ）。
如果您的应用程序隐藏了该容器（通常通过CSS display: none;或者某个框架选项卡/模式/其他…）或稍后更改了其大小，则Leaflet将不会意识到新的大小。 因此它不会正确渲染。 通常情况下，它只下载它认为显示的容器部分的瓦片。 在容器在地图初始化时完全隐藏的情况下，这可以是左上angular的单个瓦片。
当将地图容器embedded到“标签”或“模式”面板中时，通常会出现这种错误，可能使用stream行的框架（Bootstrap，Angular，Ionic等）。
传单侦听浏览器窗口大小调整事件，并在发生时再次读取容器大小。 这解释了为什么地图突然在窗口大小调整。
你也可以通过调用map.invalidateSize()来手动触发这个更新，当标签面板被显示时（例如，添加一个监听器到标签button点击），至less在第一次使用正确的尺寸渲染容器。
至于实现标签button点击监听器，对这个话题执行一个新的search：你应该有足够的资源可用于这个问题，大多数stream行的框架。
首先，感谢@ghybs为您解释为什么Leaflet地图在这些情况下没有正确显示。
对于那些尝试@ ghybs的答案失败的人，你应该尝试调整浏览器的大小，而不是调用map对象的方法：
window.dispatchEvent(new Event('resize'));
这个修复工作对我来说，它应该在任何情况下工作。
