为什么我的 jQuery Mobile/Google Maps API3 应用程序中的地图居中? [英] Why is the centering of my map off in my jQuery Mobile / Google Maps API3 application?

问题描述

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

如果你直接带着地图进入我应用的这个页面，地图会正确地居中在圆心.

) 然后按你的方式进入带有地图的页面，地图是

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

为什么当我从主页单击带有地图的页面时，地图会出错，但如果我直接访问带有地图的页面，则可以正常工作?

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

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

解决方案

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

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

或者，也许您可​​以在 pageshow 事件中调用地图调整大小事件.

I have a map powered by Google Maps Javascript API3 in my jQuery Mobile web application. I added a circle with black borders on it.

If you go to this page of my app with the map directly, the map is centered correctly at the center of the circle.

http://goo.gl/XvLST

If you go to this home page of my app first (http://goo.gl/0IWgE) and then click your way into the page with the map, the map is

1. centered erringly (The map should be centered at the center of the circle).
2. missing an entire area covered in grey.

Why is the map erring when I click into the page with the map from my home page, but working correctly if I visit the page with the map directly?

I could just not use Ajax to load the map page with data-ajax='false'. However, I cannot actually do this because a mobile application does not allow for non-ajax loads.

google.maps.event.trigger(map, 'resize') seems to reposition the map when I enter it into the Chrome Web Developer console, but I am not sure where to call it in my javascript.

解决方案

Because the page is actully loaded via ajax (when coming from index) - the page event you are using is probably being called before the DOM is totally ready. GMaps expect the page to be ready.

Try using a different event other than pageinit. Looks like pageshow might be a good one (as it runs after any animation has finished) http://jquerymobile.com/demos/1.0/docs/api/events.html

Or maybe you could put the call to the maps resize event, in a pageshow event.

这篇关于为什么我的 jQuery Mobile/Google Maps API3 应用程序中的地图居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！