为什么我的地图在我的jQuery Mobile/Google Maps API3应用程序中居中？

Question

我的jQuery Mobile Web应用程序中有一张由Google Maps Javascript API3提供支持的地图.我添加了一个带有黑色边框的圆圈.

如果您直接使用地图转到我的应用的此页面,则地图会正确居中于圆圈的中心.

http://goo.gl/XvLST

如果你首先访问我的应用程序的这个主页(http://goo.gl/0IWgE),然后点击你的方式进入页面的地图,地图是

1. 错误地居中(地图应该以圆心为中心).
2. 错过了整个灰色区域.

当我从主页点击带有地图的页面时,为什么地图会出错,但如果我直接访问带有地图的页面,工作正常？

我可以不使用Ajax加载地图页面data-ajax='false'.但是,我实际上无法做到这一点,因为移动应用程序不允许非ajax加载.

google.maps.event.trigger(map, 'resize') 当我将其输入Chrome Web Developer控制台时似乎重新定位了地图,但我不确定在我的javascript中将其调用到何处.

Answer 1

因为页面是通过ajax(当来自索引时)被动态加载的 - 你正在使用的页面事件可能在DOM完全就绪之前被调用.GMaps希望页面准备就绪.

尝试使用pageinit以外的其他事件.看起来像pageshow可能是一个很好的(因为它在任何动画完成后运行) http://jquerymobile.com/demos/1.0/docs/api/events.html

或者也许你可以在pageshow事件中调用map resize事件.