為什麼我的傳單地圖無法在資料切換選項卡結構中載入？

資料切換標籤幹擾傳單地圖初始化

傳單地圖以其在網頁上顯示互動式地圖的能力而聞名。但是，在資料切換標籤結構中使用 Leaflet 地圖時可能會出現問題，導致地圖無法正確載入。

理解問題

問題源自於 Leaflet 初始化其地圖的方式。它在地圖創建期間計算容器大小。如果容器在初始化時隱藏（例如，在資料切換標籤的情況下，在隱藏標籤內），Leaflet 可能無法準確確定其大小。這可能會導致圖塊下載不正確和地圖渲染不完整。

解決方案：手動更新容器大小

要解決此問題，您可以使用以下命令手動觸發容器大小更新map.invalidateSize() 方法。這會強制 Leaflet 重新計算容器大小，使其能夠正確下載圖塊並如預期顯示地圖。

以下是使用 jQuery 實現此解決方案的方法：

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

在此程式碼中， shown.bs.tab 事件監聽器用於偵測「carte」標籤何時顯示。發生這種情況時，會觸發 map.invalidateSize() 函數，確保更新容器大小並正確顯示地圖。

附加說明

當容器第一次以正確的方式顯示時，map.invalidateSize() 方法應該只呼叫一次尺寸。
• 此解決方案適用於在隱藏或動態變化的容器中初始化地圖的任何情況。

以上是為什麼我的傳單地圖無法在資料切換選項卡結構中載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！