在jquery mobile中更改页面后，谷歌地图仅部分加载

Question

我在jquery mobile中有主页，该主页链接到另一个页面，其中地图遍布整个屏幕，顶部有标题。当我使用地图转到该链接时，地图仅部分加载（正如您在屏幕截图中看到的那样），当我尝试移动它时，它会跳回来。

正如您所见，画布已正确加载，因为有谷歌地图徽标和使用条款。这有什么问题？

一个事实：当我刷新地图页面（不在主页上开始）或当我在地图页面上调整浏览器窗口大小时，它显示完全正常。

Answer 1

在地图上触发刷新。当地图容器更改大小或最初隐藏然后显示时，可能会发生这种情况。例如，当使用jQuery UI选项卡并在隐藏选项卡上初始化地图时，也会发生同样的事情。

google.maps.event.trigger(map, 'resize')

Answer 2

地图已加载到pageinit上的DOM中，因此它现在无法获得正确的屏幕/窗口度量。因此，您必须将地图初始化为pagebeforeshow，因为它允许地图获取屏幕尺寸。

这是它的工作原理。

$(document).on('pagebeforeshow', '[data-role="page"]#map' , function()

而不是

$(document).bind('pageinit', function()

Answer 3

我遇到了同样的问题，最后通过触发＆＃39;调整大小来解决问题。两次。像这样：

$("#mapelement").height(10);
$("#mapelement").width(10);
google.maps.event.trigger(googlemap, 'resize');
setTimeout(function() {
    adjustMapSize();  // set the correct size of #mapelement
    google.maps.event.trigger(googlemap, 'resize');
    updateMap();     // center the map and display markers
}, 500);

Answer 4

$(document).on('pageshow', "#name-page", function() {
    initialize();
});

试试这个，