Dlaczego wyśrodkowanie mojej mapy jest wyłączone w mojej aplikacji jQuery Mobile/Google Maps API3?

Mam mapę obsługiwaną przez Google Maps JavaScript API3 w mojej aplikacji internetowej jQuery Mobile. Dodałem koło z czarnymi obramowaniami.Dlaczego wyśrodkowanie mojej mapy jest wyłączone w mojej aplikacji jQuery Mobile/Google Maps API3?

Jeśli przejdziesz bezpośrednio do tej strony mojej aplikacji z mapą, mapa jest wycentrowana poprawnie w środku okręgu.

http://goo.gl/XvLST

enter image description here

Jeśli pójdziesz do strony głównej mojego app pierwszego (http://goo.gl/0IWgE), a następnie kliknij swoją drogę do strony z mapą, mapa jest

wyśrodkowany brzydko (mapa powinna być wycentrowana w środku koła).
brakuje całego obszaru pokrytego kolorem szarym.

enter image description here

Dlaczego mapa błądzących po kliknięciu na stronę z mapą z mojej strony głównej, ale działa poprawnie, jeśli mogę odwiedzić stronę z mapą bezpośrednio?

Po prostu nie mogłem użyć Ajax do załadowania strony mapy z data-ajax='false'. Jednak nie mogę tego zrobić, ponieważ aplikacja mobilna nie zezwala na ładunki inne niż ajax.

google.maps.event.trigger(map, 'resize') wydaje się zmieniać położenie mapy po wejściu do niej w konsoli programistów Chrome Web, ale nie jestem pewien, gdzie ją wywołać w moim javascript.

Źródło

2012-03-19 dangerChihuahua007

Nie widzę niczego tutaj http://dl.dropbox.com/u/1531353/CS164/mockups/map%20askew/index.html, czy można umieścić zrzut ekranu, gdy jest źle wyrównany – defau1t

Jeśli kliknij na link na tej stronie, powinieneś zobaczyć mapę, która jest źle wyśrodkowana. Co dziwne, link jest prawidłowo wyśrodkowany, jeśli odwiedzisz stronę http://goo.gl/XvLST bezpośrednio. – dangerChihuahua007

Dodałem zrzuty ekranu na wypadek, gdyby pomogło to wyjaśnić mój problem. Dzięki. – dangerChihuahua007

Ponieważ strona jest załadowana actully za pośrednictwem ajax (gdy pochodzi z indeksu) - zdarzenie strony, z którego korzystasz jest prawdopodobnie wywoływane przed DOM całkowicie gotowy. GMaps oczekuje, że strona będzie gotowa.

Spróbuj użyć innego zdarzenia niż pageinit. Wygląda pageshow może być dobry (jak biegnie po animacja zakończył) http://jquerymobile.com/demos/1.0/docs/api/events.html

Albo można umieścić wezwanie do zmiany rozmiaru mapy zdarzenie, w przypadku pageshow.

Źródło

2012-03-22 15:24:43 barryhunter

Dziękuję, spróbuję to jak najszybciej. Ciekawe, czy istnieje systematyczny sposób przeglądania wszystkich zdarzeń uruchamianych dla określonego elementu na stronie? – dangerChihuahua007

Nie to, co wiem. Musiałby słuchać wszystkich zdarzeń i logować je. Ale musisz znać wszystkie zdarzenia, które istnieją, aby to zadziałało :) – barryhunter

Pomyślałem o zmianie "pageinit" na "pagehow" na twojej stronie. – codaniel

Czy strona jest ponownie ładowana między stroną główną a mapą? Jeśli nie, i jeśli tworzysz lub zmieniasz rozmiar elementu div, musisz zadzwonić pod numer google.maps.event.trigger(map, 'resize') po zmianie div (zmiana rozmiaru lub usunięcie ekranu: brak). (edytowane, aby pokazać kod wywołujący zdarzenie, dzięki @Heitor Chang)

Źródło

2012-03-19 20:17:27

Dzięki, ale otrzymuję ten błąd z 'map.resize()' gdy nazywam to: 'Uncaught TypeError: Object # nie ma metody 'resize''. Odwołanie do interfejsu API Map Google3 również nie wspomina o metodzie "resize()" powiązanej z obiektem Map. http://goo.gl/ORciv – dangerChihuahua007

Wypróbuj google.maps.event.trigger (map, 'resize')? Jest pod "wydarzeniami" google.maps.Map w API ref –

Dziękuję, w którym z moich funkcji, jak myślę powinienem to nazwać? Próbowałem wywoływanie go w 'addCircle()' bez skutku. – dangerChihuahua007

połączeń google.maps.event.trigger(mapObj, "resize"); na pageshow lub pagechange

Źródło

2012-10-14 21:23:41

w moim przypadku, moja obejście jest $('#mapdiv').trigger('create'); działa dobrze. ale w innych przypadkach nie wiem, że to działa.

Źródło

2016-06-12 15:32:19 Kumquat601

Dlaczego wyśrodkowanie mojej mapy jest wyłączone w mojej aplikacji jQuery Mobile/Google Maps API3?

Odpowiedz

Powiązane problemy