在更换jquery mobile中的页面后，Google地图部分加载 [英] After changing page in jquery mobile, google map loads just partly

问题描述

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

I've got home page in jquery mobile that has link to another page where map is all over the screen with header on top. When I go to that link with the map, the map loads just partly (as you can see on screenshot) and when I try to move it, it jumps back.

正如你所看到的画布是正确加载，因为有谷歌地图徽标和使用条款。有什么不对？

As you can see the canvas is properly loaded, because down there is google map logo and Terms of use. What is wrong with that?

其中一个事实是：当我刷新地图页面（不是从主页开始）或者当我在地图上时调整浏览器窗口的大小

One fact: When I refresh the map page (not starting on home page) or when I resize the browser window when I'm on map page, it shows up perfectly fine.

推荐答案

映射被加载到 pageinit ，因此它现在不会获得正确的屏幕/窗口度量。因此，您必须绑定将地图初始化为 pagebeforeshow ，因为它允许地图获得屏幕大小。

The map is loaded into DOM on pageinit, therefore it doesn't now obtain the right screen/window measures. Thus, you have to bind initializing the map to pagebeforeshow as it allow the map to get the screen size.

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

而不是

instead of

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

这篇关于在更换jquery mobile中的页面后，Google地图部分加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！