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

【问题标题】：After changing page in jquery mobile, google map loads just partly在 jquery mobile 中更改页面后，谷歌地图仅部分加载
【发布时间】：2013-03-13 16:48:42
【问题描述】：

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

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

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

【问题讨论】：

向我们展示您的页面标记。这可能是data-role=content 中的 div 问题。
试试这个$(document).bind('pageinit', '[data-role='page']#map', function()而不是$(document).bind('pageinit', function()
不，仍然是同样的问题，但那是一段很棒的代码，每次我更改页面时它都不会加载地图:)
也许我正在寻找一个在 DOM 加载之后触发的事件，而不是之前，就我而言，'pageinit' 确实如此。但我在谷歌的任何地方都找不到那个活动。
对不起，我的错，那是因为它是在 DOM 中启动和加载的。

标签： javascript jquery-mobile google-maps-api-3

【解决方案1】：

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

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

【讨论】：

这也是一个很棒的东西。谢谢，我正在寻找这个与其他东西有关的东西。

【解决方案2】：

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

这是它的工作原理。

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

而不是

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

【讨论】：

嗨 Omar，我的函数名为 initializeMap()。我应该把你上面建议的文件放在哪里？谢谢
@Malloc 嗨，您使用的是哪个 JQM 版本？您可以发布一个包含所有详细信息的单独问题吗？ :)
嗨。我正在使用 jquery 1.11.0 和 jquery mobile 1.4.2。好的，我正在发布一个单独的问题
这是我的问题帖：stackoverflow.com/questions/23176423/…

【解决方案3】：

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

$("#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);

【讨论】：

【解决方案4】：

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

试试这个，

【讨论】：