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