Jak poczekać na graficzne mapy Google, aby dołączyć getGMap do obiektu kontrolnego

Question

Próbowałem skonfigurować detektory zdarzeń kliknięcia na obiekcie google.maps.Map, który został utworzony przez dyrektywę ui-gmap-google-map z Angular Google Maps library.

Potrzebuję zrobić to dynamicznie, więc wydaje mi się (przez moje krótkie testy co najmniej), że używanie parametru events na dyrektywie ui-gmap-google-map nie będzie działać (ponieważ wydaje się "czytać" wartość parametru tylko raz, ale może się mylę).

Postanowiłem więc użyć parametru control, który powiększa obiekt określony przez wartość parametru metodami getGMap i refresh. Oto co mój Wykorzystanie dyrektywa wygląda następująco:

<ui-gmap-google-map center="appCtrl.mapSetup.center" 
        zoom="appCtrl.mapSetup.zoom" 
        control="appCtrl.mapSetup"> 
</ui-gmap-google-map> 

Wreszcie mam ładowania API Map Google asynchronicznie, a opierając się na GoogleMapApi usług/obietnicy (część kątowe Google Maps), aby wiedzieć, kiedy mogę zacząć bezpiecznie postępowanie z obiektem google.maps.Map (np. dodawanie detektorów zdarzeń itp.). Oto mały przykład, co to wygląda:

// inside the AppController constructor, see the fiddle linked below 
var mapSetup = this.mapSetup; 
GoogleMapApi.then(function() { 
    google.maps.event.addListener(mapSetup.getGMap(), 'click', function() { 
     alert('hello'); 
    }); 

Więc gdy strona jest załadowany (here's the fiddle), otrzymuję „Błąd typu: niezdefiniowane nie jest funkcją”, ponieważ obiekt mapSetup nie została zwiększona z getGMap lub refresh. Wygląda na to, że tak powinno być, w oparciu o moje zrozumienie dokumentacji.

ja owinięty połączenia addListener z $timeout (służba kątowa) używając kilkaset milisekund opóźnienia, a następnie pracował ponieważ obiekt mapSetup miał do tego czasu został wzbogacony o getGMap.

Czy istnieje sposób na uniknięcie konieczności używania $timeout z arbitralnym opóźnieniem, aby poczekać, aż określony obiekt zostanie faktycznie rozszerzony?

Answer 1

Przez moje testowanie i przez to, co przeczytałem w dokumentach oraz w różnych komentarzach do wydania, wydaje się, że to (czekanie, aż obiekt control zostanie rozszerzony) jest jedną z rzeczy, które usługi uiGmapIsReady w Angular Google Maps został zaprojektowany dla.

Mój obecny jest zrozumienie, że uiGmapGoogleMapApi należy stosować czekać na async załadunku Google Maps API i uiGmapIsReady należy stosować czekać na uiGmap* dyrektyw i wszystkie one pociągać za sobą (w tym control obiektu powiększania), aby zakończyć. Nazywanie mówi wszystko.

Oto a new demo fiddle. Wykorzystanie tego demo z IsReady:

IsReady.promise().then(function (maps) { 
    var map1 = $scope.control.getGMap(); 
    var map2 = maps[0].map; 
    alert(map1 === map2); // true 
}); 

IsReady.promise (source) akceptuje opcjonalny argument całkowitą wskazującą (jestem całkiem pewny) numer ui-gmap-google-map dyrektyw strona jest korzystających. Domyślnie jest to 1. (Jeśli zdarzy ci się nadać mu "nieprawidłowy" numer, wierzę, że istnieje (zdalna?) Możliwość, że zwrócona obietnica nigdy nie rozwiąże problemu.)

Answer 2

Skończyło się na użyciu waniliowego JS i wszystko działało bez bólu głowy. Kątowe Mapy Google to świetny pomysł, ale przynajmniej w moim przypadku problemy przewyższają korzyści.

Po spędzeniu około godziny na github i stackoverflow, zdałem sobie sprawę, że proponowane rozwiązania (takie jak https://github.com/angular-ui/angular-google-maps/issues/308) były atakiem hackowania, a ponieważ moim zadaniem było "wyświetlenie niektórych znaczników na mapie i wyśrodkowanie mapy na "Nie chcę używać hackowania.

Dokumentacja gmaps zawiera mnóstwo przykładów (w waniliowym JS), które mogą być używane w aplikacji kątowej, kopiowanie + wklejanie i gotowe.

Ponownie, to jest moje osobiste doświadczenie, może nie być takie samo dla ciebie