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

我使用的标签来显示清晰的内容,但其中一个停止下载,因为它在数据切换选项卡。 这是一个传单地图。 这里是代码:


导航代码:

<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')); 

这个修复工作对我来说,它应该在任何情况下工作。