Как подождать Angular Google Maps, чтобы добавить getGMap к объекту управления

Я пытаюсь настроить прослушиватели событий на объекте google.maps.Map, созданный директивой ui-gmap-google-map из Angular Google Maps библиотека.

Мне нужно сделать это динамически, поэтому, по крайней мере, по моему краткому тестированию, использование параметра events в директиве ui-gmap-google-map не будет работать (потому что кажется, что "читать" значение параметра только один раз, но, возможно, я ошибаюсь в этом).

Поэтому я решил использовать параметр control, который увеличивает объект, названный значением параметра, с помощью методов getGMap и refresh. Вот как выглядит моя директива:

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

Наконец, я загружаю API Карт Google асинхронно и полагаюсь на услугу/обещание GoogleMapApi (часть Angular Карты Google), чтобы знать, когда я могу безопасно работать с объектом google.maps.Map (например, добавление слушателей событий и т.д.). Вот небольшой пример того, как это выглядит:

// 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');
    });

Итак, когда страница загружается (здесь скрипка), я получаю "TypeError: undefined не является функцией", потому что mapSetup объект не был добавлен с помощью getGMap или refresh. Похоже, что это должно было быть основано на моем понимании документации.

Я завернул вызов addListener с помощью $timeout (службы Angular) с задержкой в несколько сотен миллисекунд, а затем он работал, потому что к этому времени объект mapSetup был дополнен getGMap.

Есть ли способ избежать использования $timeout с произвольной задержкой до тех пор, пока объект control -specified не будет добавлен?

Ответ 1

По моему тестированию и по тому, что я читал в документах и в различных комментариях к комментариям, кажется, что это (ожидание объекта control для увеличения) является одной из вещей, которые служба uiGmapIsReady в Angular Google Maps был разработан для.

Мое настоящее понимание заключается в том, что uiGmapGoogleMapApi следует использовать для ожидания загрузки асинхронной загрузки API Карт Google и uiGmapIsReady следует использовать для ожидания директив uiGmap* и всего, что они влекут за собой (включая control увеличение объекта) завершить. Именование говорит все это.

Здесь новая демонстрационная скрипта. Это демонстрационное использование IsReady:

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

IsReady.promise (источник) принимает необязательный целочисленный аргумент, указывающий (я уверен) число директив ui-gmap-google-map, используемых вашей страницей. По умолчанию он равен 1. (Если вам посчастливилось дать ему "неправильный" номер, я считаю, что существует возможность (удаленная?), Что возвращенное обещание никогда не решит.)

Ответ 2

В итоге я использовал vanilla JS и получил все, чтобы работать без головной боли. Angular Карты Google - отличная идея, но, по крайней мере, в моем случае проблемы превосходят преимущества.

Проведя час или около того в github и stackoverflow, я понял, что предлагаемые решения (например, https://github.com/angular-ui/angular-google-maps/issues/308) были взломом взломать, и поскольку моя задача была просто "отобразить некоторые маркеры на карте и центрировать карту на них", я не хочу использовать хак.

Документация gmaps содержит множество примеров (в vanilla JS), которые можно использовать в приложении Angular, скопировать + вставить, и все готово.

Опять же, это мой личный опыт, возможно, не для вас.