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

IT技术 javascript twitter-bootstrap tabs toggle leaflet
2021-01-26 01:13:52

我正在使用选项卡来显示清晰的内容,但其中一个无法正常下载,因为它位于数据切换选项卡中。这是一张传单地图。这是代码:


导航栏代码:

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

在我将它放入选项卡之前,地图已经很好地出现了,有人知道为什么它现在不起作用吗?谢谢你=)

4个回答

欢迎来到 SO!

如果您的Leaflet 地图 在您调整浏览器窗口大小后突然正常工作,那么您会遇到经典的“地图初始化时地图容器大小无效”:为了正常工作,Leaflet 在您初始化地图时读取地图容器大小 ( L.map("mapContainerId"))。

如果您的应用程序隐藏了该容器(通常通过 CSSdisplay: none;或某些框架选项卡/模态/其他……)或稍后更改其尺寸,Leaflet 将不会知道新的大小。因此它不会正确渲染。通常,它只下载它认为显示的容器部分的图块。对于在地图初始化时完全隐藏的容器,这可以是左上角的单个图块。

当在“选项卡”或“模态”面板中嵌入地图容器时,可能会使用流行的框架(Bootstrap、Angular、Ionic 等),经常会出现这种错误。

Leaflet 侦听浏览器窗口调整大小事件,并在发生时再次读取容器大小。这解释了为什么地图突然可以调整窗口大小。

您还可以通过map.invalidateSize()在显示选项卡面板时调用(例如在选项卡按钮单击时添加侦听器)来手动触发此更新,至少在第一次以正确的尺寸呈现容器时。

至于实现选项卡按钮单击侦听器,请在 SO 上对该主题执行新搜索:对于大多数流行框架,您应该有足够的可用资源。

正是我遇到的问题,谢谢!
2021-03-12 01:13:52
嗨,我添加了 map.invalidateSize() 但它给了我错误:无法读取未定义的属性“_leaflet_pos”,知道为什么吗?
2021-03-15 01:13:52
@Ned,请附上修复代码,以map.invalidateSize()解决您的问题
2021-03-29 01:13:52
嗨@akshayKishore,请随时打开一个新问题,详细说明您的具体问题。
2021-04-10 01:13:52

首先,感谢@ghybs 对为什么在这些情况下无法正确显示传单地图的很好的解释。

对于那些尝试不成功@ghybs 的答案的人,您应该尝试调整浏览器的大小,而不是调用地图对象的方法:

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

正如@MarsAndBack 所说,此修复程序可能会导致 Leaflet 的 invalidateSize 提供的平移/动画/等功能出现问题。

这是一个方便的修复,但是您会错过 Leaflet 的 invalidateSize 提供的平移/动画/等功能。
2021-03-11 01:13:52

我有这个问题,因为我使用了modalbootstarp。无论如何它都没有解决。我试过了map.invalidateSize()window.dispatchEvent(new Event('resize'));但没有修复。

最后它修复了这个:

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

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

对于像我这样无法通过宝贵的 @ghybs 解释 ( map.invalidateSize())解决挑战而能够通过 @gangai-johann one 解决的人来说,您仍然有机会以正确的方式完成任务。将您的无效指令放在 setTimeout 中,因为调度该指令可能为时过早。

setTimeout(() => {
    this.$refs.mymap.mapObject.invalidateSize()
}, 100)

有关详细说明,请参阅https://stackoverflow.com/a/56364130/4537054答案。