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

【问题标题】：Why is the centering of my map off in my jQuery Mobile / Google Maps API3 application?为什么在我的 jQuery Mobile / Google Maps API3 应用程序中我的地图不居中？
【发布时间】：2012-04-04 07:51:29
【问题描述】：

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

如果您直接使用地图进入我的应用程序的此页面，则地图正确居中在圆的中心。

http://goo.gl/XvLST

如果你先去我的应用程序的这个主页（http://goo.gl/0IWgE）然后点击进入带有地图的页面，地图是

居中错误（地图应以圆的中心为中心）。
缺少整个被灰色覆盖的区域。

为什么我从主页点击进入带有地图的页面时地图出错，但如果我直接访问带有地图的页面却可以正常工作？

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

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

【问题讨论】：

我在这里看不到任何东西dl.dropbox.com/u/1531353/CS164/mockups/map%20askew/index.html，你能放一个屏幕截图，因为它对齐不好
如果您单击该页面上的链接，您应该会看到一个居中严重的地图。奇怪的是，如果您直接访问goo.gl/XvLST，链接会正确居中。
我添加了屏幕截图，以防它有助于澄清我的问题。谢谢。
在我看来地图上没有任何问题，我认为您绘制圆圈的方式正在造成问题。

标签： javascript jquery google-maps jquery-mobile google-maps-api-3

【解决方案1】：

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

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

或者您可以在 pageshow 事件中调用 maps resize 事件。

【讨论】：

谢谢，我会尽快尝试。只是好奇，有没有一种系统的方法来查看为页面上特定元素触发的所有事件？
我不知道。需要监听所有事件并记录它们。但是你需要知道所有存在的事件才能起作用:)
是的，将您页面上的“pageinit”更改为“pageshow”对我有用。
谢谢！将事件更改为“pageshow”解决了问题。

【解决方案2】：

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

【讨论】：

谢谢，但是当我调用 map.resize() 时，我收到了这个错误：Uncaught TypeError: Object #<V> has no method 'resize'。 Google Maps API3 参考也没有提到与 Map 对象关联的 resize() 方法。 goo.gl/ORciv
试试 google.maps.event.trigger(map, 'resize') ？它位于 API ref 中 google.maps.Map 的“事件”下
谢谢，您认为我应该在我的哪个函数中调用它？我尝试在addCircle() 中调用它，但无济于事。

【解决方案3】：

致电google.maps.event.trigger(mapObj, "resize");pageshow 或pagechange

【讨论】：

【解决方案4】：

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

【讨论】：