Использование DrawingManager с @ angular / google-maps

Question

Я пытался использовать DrawingManager с официальной оболочкой Angular компонентов API Карт, но это не сработало так, как должно. Если бы кто-то мог заставить это работать, я был бы благодарен, чтобы получить решение для этого. Вот фрагмент кода и ссылка на стек для решения, которое я пробовал, но не повезло. (В stackblitz он не распознал пространство имен Google, но если вы загрузите его, все будет в порядке на локальной машине) : https://github.com/angular/components/issues/18599

Редактировать 1: Оказалось, что проблема в том, что карта загружена не полностью, и установка DrawingManager до того, как это не вступит в силу. В этом модуле оболочки нет обратного вызова load, поэтому самый безопасный метод, который я смог найти, это метод click. Пользователю нужно будет нажать один раз, чтобы включить DrawingManager. Думаю, должно быть лучшее решение.

Answer 1

Сначала необходимо добавить ключ API Google для использования API-интерфейсов карт, описанных здесь .

Для angular рекомендуется использовать angular -карты компоненты. Здесь вы можете найти работающий Stackblitz.

Если вы хотите работать без agm, вам нужно реализовать свой собственный сервис для загрузки скрипта, как это делается в this Stackblitz .

Answer 2

Я сталкивался с этим обсуждением:

https://github.com/angular/components/issues/17828

https://github.com/angular/components/issues/18015

Как я могу проверить, полностью ли загружены Карты Google?

Основной участник компонента Maps заявил, что не планирует добавлять обратный вызов загрузки или что-либо связанное с базовым API-интерфейсом карты, поэтому я выбрал другой хакерский подход, чтобы узнать, если карта загружена внутри компонента или нет.

component.ts:

mapLoaded = false;
idleMap(event: any)  {
    if(this.mapLoaded)
      return;
    this.mapLoaded = true;
    this.drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      drawingControl: true,
      map:this.map._googleMap,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.POLYGON]
      }
    });
    google.maps.event.addListener(this.drawingManager, 'overlaycomplete', (event) => {
      if (event.type === google.maps.drawing.OverlayType.POLYGON) {
        let ar = event.overlay.getPath().getArray();
        ar.push(ar[0]);
        this.model.location.push(ar);
      }
    });
  }

html:

<google-map
    (tilesloaded)="idleMap($event)">
  </google-map>