请问“数据切换”选项卡不下载传单地图。

Question

“数据切换”选项卡不下载传单地图。我使用选项卡显示明确的内容，但其中一个停止下载很好，因为它是在数据切换选项卡。这是一张传单地图。以下是代码：海军条形码：<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>这张地图在我把它放在标签上之前就已经出现了，有人知道为什么它现在不起作用了吗？谢谢=)

Answer 1

首先，感谢@ghybs对为什么在这种情况下没有正确显示传单地图所作的很好解释。

对于那些尝试@ghybs的回答失败的人，您应该尝试调整浏览器的大小，而不是调用map对象的方法：

window.dispatchEvent(new Event('resize'));

这个修复方法对我有效，而且在每一种情况下都应该有效。

Answer 2

我有这个问题，因为我用modalBootstarp。反正也解决不了。我试过map.invalidateSize()和window.dispatchEvent(new Event('resize'));但不是固定的。

最后，这一问题得到了解决：

$('#map-modal').on('shown.bs.modal', function(event) {});

'shown.bs.modal'事件意味着当模态是完全加载和没有任何混淆的大小，现在里面写你的代码