為什麼我的傳單地圖放置在資料切換標籤內時不顯示？

資料切換標籤中的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中文網其他相關文章！