数据切换选项卡不下载传单地图 [英] Data-toggle tab does not download Leaflet map
问题描述
我正在使用标签显示清晰的内容，但其中一个停止下载，因为它位于数据切换标签中。这是一张传单地图。
以下是代码：
I am using tabs to display clear content, but one of them stopped downloading well since it is in the data-toggle tab. It is a Leaflet map. Here is the code :
Navbar代码：
<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>
脚本：
Script :
<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>
在我将其放入标签之前，地图出现的很好，是否有人知道为什么会这样做现在不行？谢谢=）
The map was appearing well before I put it in the tab, does someone have an idea why it does not work now? Thank you =)
推荐答案
欢迎来到SO！
如果你的话宣传单地图 在您调整浏览器窗口大小后突然正常工作，然后您将体验到经典的地图容器大小在地图初始化时无效：为了正常工作，Leaflet在初始化地图时读取地图容器大小（ L.map（mapContainerId））。
If your Leaflet map suddenly works correctly after you resize your browser window, then you experience the classic "map container size not valid at map initialization": in order to work correctly, Leaflet reads the map container size when you initialize the map (L.map("mapContainerId")).
如果您的应用程序隐藏了该容器（通常通过CSS display：none; ，或某些框架选项卡/模态/无论......）或以后更改其尺寸，Leaflet都不会意识到新的尺寸。因此它无法正确呈现。通常，它仅为其认为显示的容器的分数下载切片。对于在地图初始化时完全隐藏的容器，这可以是左上角的单个图块。
If your application hides that container (typically through CSS display: none;, or some framework tab / modal / whatever…) or later changes its dimensions, Leaflet will not be aware of the new size. Hence it will not render correctly. Typically, it downloads tiles only for the fraction of the container it thinks is shown. This can be a single tile in the top left corner in the case of a container that was entirely hidden at map initialization time.
嵌入地图容器时经常会出现此错误在tab或modal面板中，可能使用流行的框架（Bootstrap，Angular，Ionic等）。
This mistake often arises when embedding the map container in a "tab" or "modal" panel, possibly using popular frameworks (Bootstrap, Angular, Ionic, etc.).
Leaflet监听浏览器窗口调整大小事件，当它发生时再次读取容器大小。这解释了为什么地图突然适用于窗口大小调整。
Leaflet listens to browser window resize event, and reads again the container size when it happens. This explains why the map suddenly works on window resizing.
您也可以通过调用 map.invalidateSize（） （例如，添加一个监听器选项卡按钮单击），至少第一次使用正确的尺寸呈现容器。
You can also manually trigger this update by calling map.invalidateSize() when the tab panel is displayed (e.g. add a listener on the tab button click), at least the first time the container is rendered with its correct dimensions.
至于实现选项卡按钮单击监听器，在SO上执行新搜索关于这个话题：对于大多数流行的框架，你应该有足够的资源可供使用。
As for implementing the tab button click listener, perform a new search on SO on that topic: you should have plenty resources available for that matter, for most of the popular frameworks.
这篇关于数据切换选项卡不下载传单地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
