猿问
下载APP

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

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

我使用选项卡显示明确的内容,但其中一个停止下载很好,因为它是在数据切换选项卡。这是一张传单地图。以下是代码:


海军条形码:

<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>

这张地图在我把它放在标签上之前就已经出现了,有人知道为什么它现在不起作用了吗?谢谢=)


莫回无
浏览 70回答 3
3回答

UYOU

欢迎来到这里!如果你传单地图&nbsp;在调整浏览器窗口的大小后,突然工作正常。,然后您将体验经典的“地图容器大小在地图初始化时无效”:为了正确工作,传单在初始化地图时读取地图容器大小(L.map("mapContainerId")).如果应用程序隐藏了该容器(通常通过css)display: none;,或某些框架选项卡/模态/任何…)或者以后改变其尺寸,传单将不会注意到新的大小。因此,它将不能正确地呈现。通常,它只下载它认为显示的容器的一部分。如果容器在地图初始化时完全隐藏,这可以是左上角的单个瓷砖。当将映射容器嵌入到一个“选项卡”或“模态”面板中时,经常会出现这种错误,可能使用流行的框架(引导、角度、Ionic等)。传单听取浏览器窗口调整大小事件,并在发生时再次读取容器大小。这解释了为什么地图突然在窗口调整大小时工作。您还可以通过以下方式手动触发此更新:map.invalidateSize()当显示选项卡面板时(例如,在选项卡按钮上单击添加侦听器),至少在容器第一次呈现其正确尺寸时。至于实现选项卡按钮单击侦听器,对这个主题执行一个新的搜索:对于大多数流行的框架,您应该有足够的可用资源。

牧羊人nacy

首先,感谢@ghybs对为什么在这种情况下没有正确显示传单地图所作的很好解释。对于那些尝试@ghybs的回答失败的人,您应该尝试调整浏览器的大小,而不是调用map对象的方法:window.dispatchEvent(new&nbsp;Event('resize'));这个修复方法对我有效,而且在每一种情况下都应该有效。

慕盖茨1488219

我有这个问题,因为我用modalBootstarp。反正也解决不了。我试过map.invalidateSize()和window.dispatchEvent(new Event('resize'));但不是固定的。最后,这一问题得到了解决:$('#map-modal').on('shown.bs.modal', function(event) {});'shown.bs.modal'事件意味着当模态是完全加载和没有任何混淆的大小,现在里面写你的代码。
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答