1

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

地图截图

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

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

4

4 回答 4

3

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

google.maps.event.trigger(map, 'resize')
于 2013-03-13T17:34:03.233 回答
2

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

这是它的工作原理。

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

代替

$(document).bind('pageinit', function()
于 2013-03-13T17:37:45.497 回答
0

我有同样的问题，最后通过触发“调整大小”两次来解决它。像这样：

$("#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);
于 2015-03-22T02:40:19.467 回答
0 
$(document).on('pageshow', "#name-page", function() {
    initialize();
});

试试这个，

于 2017-10-28T10:32:34.030 回答