Leaflet + JQuery Mobile问题

Question

我有一个使用JQuery Mobile和Leaflet的网站。在开始时，地图加载正常，但当我进入另一个页面然后返回到我的地图的主页时，它看起来像这样：

没有网络错误或任何其他错误..瓷砖下载正常但它们没有一起显示，只显示一个瓷砖，其他一切都是黑色。 当我转到另一页时，我没有做任何特别的事情。我也尝试评论一切，但它仍然是相同的.. 还有其他人遇到过同样的问题吗？

Answer 1

切换到另一个页面后，包含元素样式的地图会发生变化，正如您所看到的，它不喜欢这样。捕获每次显示页面时被触发的pagecontainershow事件，检查它是否是您的地图页面，然后调用mapinstance的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