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

Question

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

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

http://goo.gl/XvLST

如果您首先访问我的应用的主页（http://goo.gl/0IWgE）然后点击进入包含地图的页面，那么地图就是

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



为什么当我使用我的主页中的地图点击页面时地图会出错，但如果我直接访问带有地图的页面，该地图是否正常工作？

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

当我将地图输入Chrome Web Developer控制台时，

google.maps.event.trigger(map, 'resize')似乎会重新定位地图，但我不确定在我的javascript中将其调用到哪里。

Answer 1

因为页面是通过ajax（来自索引）来实际加载的 - 所以你正在使用的页面事件可能在DOM完全就绪之前被调用。 GMaps希望页面准备就绪。

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

或许你可以在pageshow事件中调用map resize事件。

Answer 2

页面是否在主页和地图之间重新加载？如果没有，并且如果您正在创建div或调整div的大小，则需要在div更改后调整google.maps.event.trigger(map, 'resize')（更改大小或删除display：none）。 （编辑显示触发事件的代码，感谢@Heitor Chang）

Answer 3

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

上致电pagechange

Answer 4

就我而言，我的解决方法是   $('#mapdiv').trigger('create'); 运作良好。但在其他情况下，我不知道它有效。