javascript - 为什么我的 map 在我的 jQuery Mobile/Google Maps API3 应用程序中居中？

Question

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

如果您直接使用 map 转到我的应用程序的这个页面， map 会正确地居中在圆的中心。

http://goo.gl/XvLST

如果您先转到我的应用程序的主页 (http://goo.gl/0IWgE)，然后单击进入带有 map 的页面，则 map 是

1. 居中错误( map 应以圆心为中心)。
2. 缺失整个灰色区域。

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

我不能使用 Ajax 加载带有 data-ajax='false' 的 map 页面。但是，我实际上不能这样做，因为移动应用程序不允许非 ajax 加载。

google.maps.event.trigger(map, 'resize') 当我将 map 输入到 Chrome Web 开发人员控制台时，它似乎重新定位了 map ，但我不确定在哪里调用它我的 JavaScript。

Answer 1

因为页面实际上是通过 ajax 加载的(当来自索引时)- 您正在使用的页面事件可能在 DOM 完全准备好之前被调用。 GMaps 期望页面准备就绪。

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

或者您可以在 pageshow 事件中调用 map 调整大小事件。