jQuery Mobile和Google Maps Glitch

Question

我需要在使用JQuery Mobile框架的移动应用程序的多个页面上显示Google Map。 我的应用程序只是一个Android应用程序，使用Webview并加载存储在资产目录中的本地.html页面（和.js文件）。

第一次打开带有地图的页面时，该地图看起来很棒，并且效果很好。 如果返回此页面，或者如果打开另一个带有地图的页面，则该页面在加载时会闪烁，然后地图本身也会出现故障。 最初仅在地图图块的左1/3处可见。 拖拉地图只会使问题变得更糟。 好像地图不知道应该加载哪个图块。

有没有人遇到过在JQuery Mobile框架上运行多个地图页面的问题？ 如果在这一点上我不得不冒险猜测的话，我可能会猜测JQuery Mobile框架的AJAX加载系统正在导致页面之间关于地图的某种干扰。 我知道有一些方法可以关闭AJAX支持，但是如果不需要的话，我宁愿不这样做。

Answer 1

我已经使用jQuery Mobile Framework为我的学校创建了一个地图应用程序。 由于滚动时使用AJAX加载Google地图，因此导致视觉错误和加载缓慢。

http://ceapps.weber.edu/tourdeweber

测试其中一张地图，让我知道您的问题是否相似。

我使用$.mobile.page.prototype.options.domCache = true; 初始化JQM以存储您访问过的每个页面以提高性能。

Answer 2

呼叫google.maps.event.trigger(mapObj, "resize"); 在pageshow或pagechange