为什么我的传单地图放置在数据切换选项卡内时不显示？

数据切换选项卡中的 Leaflet 地图问题

使用选项卡显示内容时，可能会遇到 Leaflet 地图的问题放置在数据切换选项卡中时无法下载。

原因

由于 Leaflet 初始化地图容器大小的方式而出现此问题。初始化地图时，Leaflet 会读取容器大小，如果容器被隐藏或其尺寸发生更改，该大小稍后会变得无效。

解决方案

解决此问题问题，您需要在显示选项卡后手动更新容器大小。这可以使用map.invalidateSize()方法来实现。

实现

在您的JavaScript代码中，为选项卡按钮的点击事件添加监听器以触发地图update:

$(document).ready(function () {
    var map = new L.Map('carteBenef');
    // ... (rest of your code)
    
    // Add listener to tab button click
    $('#carteTabButton').on('click', function () {
        map.invalidateSize();
    });
});

或者，您可以使用特定于框架的方法根据选项卡的可见性触发地图更新。例如，在 Bootstrap 中，您可以使用 shown.bs.tab 事件：

$('#carteTab').on('shown.bs.tab', function () {
    map.invalidateSize();
});

通过在选项卡显示后更新地图容器大小，您可以确保 Leaflet 地图在标签。

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