Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
905 views
in Technique[技术] by (71.8m points)

javascript - Why is the centering of my map off in my jQuery Mobile / Google Maps API3 application?

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

enter image description here

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.

enter image description here

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...