Ошибка при интеграции карты Google в ионной 4

Я пытаюсь интегрировать Google Map в приложение Ionic 4, и, к сожалению, сталкивается с nativeElement не найдена ошибка.

@ViewChild ('Map') mapElement: ElementRef; ~~~~~~~~~~~~~~~~

node_modules/@angular/core/core.d.ts: 8436: 47 8436 (селектор: Тип | Функция | строка, опции: {~~~~~~~ 8437 read ?: any; ~~~~~~~~ ~~~~~~~~~~~ 8438 статический: логический; ~~~~~~~~~~~~~~~~~~~~~~~~ 8439}): любой; ~~~~~ Аргумент для 'opts' не был предоставлен. Системная консоль.

home.page.ts

import {Component, ElementRef, NgZone, ViewChild, OnInit} from '@angular/core'
import {Geolocation} from '@ionic-native/geolocation/ngx'

declare var google: any;
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
    @ViewChild('Map') mapElement: ElementRef;
    map: any;
    mapOptions: any;
    location = {lat: null, lng: null};
    markerOptions: any = {position: null, map: null, title: null};
    marker: any;
    apiKey: any = 'API_KEY' 

  constructor(public zone: NgZone, public geolocation: Geolocation) {
    /*load google map script dynamically */
      const script = document.createElement('script');
      script.id = 'googleMap'
      if (this.apiKey) {
          script.src = 'https://maps.googleapis.com/maps/api/js?key=' + this.apiKey;
      } else {
          script.src = 'https://maps.googleapis.com/maps/api/js?key='
      }
      document.head.appendChild(script);
      /*Get Current location*/
      this.geolocation.getCurrentPosition().then((position) =>  {
          this.location.lat = position.coords.latitude;
          this.location.lng = position.coords.longitude;
      });
      /*Map options*/
      this.mapOptions = {
          center: this.location,
          zoom: 21,
          mapTypeControl: false
      };
      setTimeout(() => {
          this.map = new google.maps.Map(this.mapElement.nativeElement, this.mapOptions);
          /*Marker Options*/
          this.markerOptions.position = this.location;
          this.markerOptions.map = this.map;
          this.markerOptions.title = 'My Location'
          this.marker = new google.maps.Marker(this.markerOptions);
      }, 3000);
  }

}

Всего 2 ответа


Более новые версии Angular требуют, чтобы вы предоставили объект в качестве второго параметра для декоратора @ViewChild (docs) . Этот объект должен иметь логическое значение для static .

// {static: boolean}
@ViewChild('Map', {static: false) mapElement: ElementRef;

Решение о том, должно ли static быть true или false, зависит от того, выполняете ли вы динамический рендеринг элемента в шаблоне, например, с помощью *ngIf или *ngFor . Если вы не используете эти (или любые другие структурные директивы), вы должны установить для static значение false, чтобы вы могли получить доступ к элементу как можно скорее.

Говоря о том, когда вы можете получить доступ к ссылке на элемент, у вас есть много логики в конструкторе компонентов. Настоятельно рекомендуется переместить его из конструктора в хук жизненного цикла. Вам абсолютно необходимо переместить любой код, ссылающийся на mapElement , из конструктора, поскольку он всегда будет там неопределенным (возможно, именно поэтому вы используете setTimeout ?). ElementRef с {static:false} будет доступен в ngOnInit , тогда как ElementRef с {static:true} будет доступен в ngAfterViewInit .

Поскольку вы используете Ionic, было бы неплохо также взглянуть на их крючки жизненного цикла .


Мы можем установить static в значение true, если у вас есть ситуация, когда нам нужно получить доступ к результату запроса представления до вызова хука ngAfterVewInit. Однако, установив true, разрешите доступ к результатам запроса представления из жизненного цикла ngOnInit.

Последняя версия Angular, @ViewChild имеет 2 параметра

@ViewChild(‘Map’, {static: true}) mapElement: ElementRef;

Есть идеи?

10000