为什么我的传单地图无法在数据切换选项卡中加载？-js教程-PHP中文网

为什么我的传单地图无法在数据切换选项卡中加载？

Barbara Streisand

发布： 2024-11-24 18:50:45

原创

962 人浏览过

Why Does My Leaflet Map Fail to Load in a Data-Toggle Tab?

传单地图无法在数据切换选项卡中加载

问题

在选项卡式界面中，数据切换选项卡中的传单地图失败加载正确。

代码

导航栏：

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

登录后复制

传单脚本：

var map = new L.Map('carteBenef');
// Configure the map here

登录后复制

原因

出现此问题是因为Leaflet在初始化时读取了地图容器大小。当地图放置在隐藏选项卡中时，容器尺寸尚未生效，导致图块加载不完整。

解决方案

要解决此问题，您可以在以下情况下手动触发地图尺寸更新：将显示包含地图的选项卡。这可以通过在选项卡激活事件上调用 map.invalidateSize() 来实现。

示例：

$('a[href="#carte"]').on('shown.bs.tab', function () {
    map.invalidateSize(true);
});

登录后复制

这将强制 Leaflet 重新评估地图容器大小并正确加载瓷砖。

以上是为什么我的传单地图无法在数据切换选项卡中加载？的详细内容。更多信息请关注PHP中文网其他相关文章！