AngularJS: mapuj za pomocą Google Maps API v3 w zakładce

Próbuję utworzyć stronę z zakładkami (używając AngularJS). Na jednej z tych kart znajduje się mapa (Google Maps API v3). Kiedy mapa znajduje się w zakładce na pierwszym planie, wszystko wydaje się być w porządku. Ale kiedy mapa jest załadowana na kartę tła i widoczna dopiero po kliknięciu karty, mapa jest zgubiona/ucięta i kiedy próbujesz manipulować nią, jej funkcjonalność wydaje się być zepsuta.AngularJS: mapuj za pomocą Google Maps API v3 w zakładce

Szukałem rozwiązania i znalazłem te sztuczki z

google.maps.event.trigger(map, 'resize'); 
map.setCenter(center);

ale to nie działa. Czy możesz rzucić okiem na http://jsfiddle.net/n4q7Y/5/ i powiedzieć mi, co przegapiłem?

Dziękuję.

Źródło

2013-01-21 honzzz

Poczekaj chwilę, zanim wywoła resize -event: http://jsfiddle.net/doktormolle/aAeZw/

Źródło

2013-01-21 18:51:28

Nicea, dziękuję :-) Ta ryba zaktualizowanego z ideą także wczytuje znacznik: http://jsfiddle.net/honzzz/n4q7Y/22/ – honzzz

Dr .Molle, jakikolwiek pomysł, dlaczego jest to konieczne? Wygląda to jak włamanie, aby ominąć lukę w module Mapy, który powoduje jednoczesne wystąpienie dwóch akcji $ $. $ $. Które powinny zostać naprawione w module, a nie w limicie czasu. –

Domyślam się, że problem polega na tym, że zmiany na wybranej właściwości są obserwowane przez 2 podmioty (1 wymuszone przez '$ scope. $ watch' i 2. przez' ng-show'), ale nie ma sposobu na kontrolowanie porządku na wezwanie słuchaczy, ponieważ są one nazywane asynchronicznie. Lepszym rozwiązaniem może być ustawienie innej właściwości, która wskazuje, że mapa będzie wyświetlana i oglądanie tej właściwości, aby wywołać zdarzenie zmiany rozmiaru mapy: http://jsfiddle.net/doktormolle/6WxtE/ –

dziękuję Dr.Molle, jeśli mogę to poprawić trochę, w moim przypadku $ Timeout bezzwłocznie wykonać zadanie doskonale (jak to będzie czekać aż do końca $ strawienia cykl)

$timeout(function() { 
    // in my case 
    initializeMap(); 
    // OR this case: 
    google.maps.event.trigger(map, 'resize');      
}, 1000); // with or without delay

Źródło

2015-04-01 01:53:43

Hej @ Zeev G, nie działa bez opóźnienia? Limit czasu bez opóźnienia to sztuczka, która czeka, że kąt jest gotowy.(Ale możliwe, że mapa Google jest ładowana asynchronicznie, więc może być wolniejsza niż kątowa) –

to mój kod, który nie działał bez 1000 mil –

AngularJS: mapuj za pomocą Google Maps API v3 w zakładce

Odpowiedz

Powiązane problemy