我使用标签来显示清晰的内容，但其中一个停止下载，因为它是在数据切换标签。这是一个传单Map。这里是代码：
导航条代码：
<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>型
Map在我把它放在标签之前就已经出现了，有人知道为什么它现在不工作了吗？
4条答案
按热度按时间lawou6xi1#
如果您的Leaflet map在调整浏览器窗口大小后突然正常工作，那么您会遇到经典的“map初始化时map容器大小无效”：为了正常工作，Leaflet会在您初始化map时读取map容器大小（
L.map("mapContainerId")）。如果应用程序隐藏了该容器，（通常通过CSS
display: none;，或一些框架选项卡/模态/任何.）或以后更改其尺寸，Leaflet将不知道新的大小。因此，它将无法正确呈现。通常，它只为它认为显示的容器的一部分下载瓷砖。这可以是左上角的一个瓷砖，如果一个容器在Map初始化时完全隐藏。这个错误经常出现在将map容器嵌入“tab”或“modal”面板时，可能使用流行的框架（Bootstrap，Angular，Ionic等）。
Leaflet监听浏览器窗口调整大小事件，并在发生时再次读取容器大小。这解释了为什么Map突然在窗口调整中起作用。
您也可以在选项卡面板显示时通过调用
map.invalidateSize()手动触发此更新（例如，在选项卡按钮单击时添加侦听器），至少在容器第一次以正确的尺寸呈现时。至于实现选项卡按钮单击侦听器，请在SO上执行关于该主题的新搜索：对于大多数流行的框架，您应该有大量可用的资源。
dy1byipe2#
首先，感谢@ghybs对为什么在这些情况下传单Map没有正确显示的解释。
对于那些尝试@ghybs的答案失败的人，你应该尝试调整浏览器的大小，而不是调用map对象的方法：
字符串
正如@MarsAndBack所说，此修复可能会导致Leaflet的invalidateSize提供的平移/动画/等功能出现问题。
w8f9ii693#
我有这个问题，因为我使用
modalbootstarp.它没有解决无论如何.我尝试了map.invalidateSize()和window.dispatchEvent(new Event('resize'));，但没有固定.最后，它被这样固定了：
$('#map-modal').on('shown.bs.modal', function(event) {});个'shown.bs.modal'事件意味着当模态完全加载并且没有任何大小上的混乱时，现在在里面写代码。eagi6jfj4#
对于那些像我一样无法用宝贵的@ghybs解释（
map.invalidateSize()）解决这个问题，而能够用@gangai-johann one解决的人来说，你仍然有机会用正确的方式解决这个问题。把你的无效指令放在一个settool中，因为现在分派这个指令可能还为时过早。字符串
有关详细说明，请参阅https://stackoverflow.com/a/56364130/4537054答案。