Leaflet + JQuery Mobile問題

Question

我有一個使用JQuery Mobile和Leaflet的網站。在啓動地圖加載很好，但是當我在另一個頁面中輸入去，然後回到網頁上我的地圖，它看起來像這樣：

沒有網絡錯誤或任何其他錯誤..瓷磚下載得很好，但它們只是沒有顯示在一起，只顯示一塊瓷磚，其他一切都是黑色的。 當我進入其他頁面時，我沒有做任何特別的事情。我也試圖評論一切，但它仍然是一樣的。 有沒有其他人遇到同樣的問題？

Answer 1

切換到另一個頁面後，地圖的包含元素樣式會發生變化，正如您所看到的，它不會那樣。捕獲每次顯示頁面時觸發的pagecontainershow事件，檢查它是否爲您的地圖頁面，然後調用地圖實例的invalidateSize方法，以便更新您的地圖。這應該夠了吧。

// Attach event handler to pagecontainershow event 
// This will execute every time a page is shown/ready 
$(document).on('pagecontainershow', function(e, ui) { 
    // Get the id of the currently active page 
    var pageId = $('body').pagecontainer('getActivePage').prop('id'); 
    // Check if the id matches the id of your map's page 
    if (pageId == 'id_of_your_map_page') { 
     // It's a match, invalidate the map so it resets 
     map.invalidateSize(); 
     // Assuming 'map' holds a reference to your map instance 
    } 
}); 

https://api.jquerymobile.com/pagecontainer/#event-show

http://leafletjs.com/reference.html#map-invalidatesize