我正在使用标签来显示清晰的内容,但是其中一个标签由于位于数据切换标签中而无法很好地下载。这是一张传单地图。这是代码:
导航栏代码:
<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"))时会读取地图容器大小。
L.map("mapContainerId")
如果您的应用程序隐藏了该容器(通常是通过CSS display: none;或某些框架选项卡/模式/等等),或者稍后更改了其尺寸,则Leaflet将不会意识到新的尺寸。因此,它将无法正确渲染。通常,它仅下载它认为显示的容器部分的图块。如果容器在地图初始化时被完全隐藏,则它可以是左上角的单个图块。
display: none;
当将地图容器嵌入“选项卡”或“模式”面板中时,经常会出现这种错误,可能使用流行的框架(Bootstrap,Angular,Ionic等)。
Leaflet侦听浏览器窗口调整大小事件,并在发生这种情况时再次读取容器大小。这解释了为什么地图突然在调整窗口大小时起作用。
您也可以map.invalidateSize()至少在首次使用正确尺寸渲染容器时,通过在显示选项卡面板时调用(例如,在选项卡按钮单击上添加侦听器)来手动触发此更新。
map.invalidateSize()
至于实现选项卡按钮单击侦听器,请对该主题进行新的搜索:对于大多数流行的框架,您应该有足够的资源来解决此问题。