Ошибка типа геокодера в Angular не определена

Question

Мой Geocoder в моем проекте Angular падает, потому что он не определен.Я попытался это: Получение 'Uncaught TypeError: Невозможно прочитать свойство' геокод 'неопределенной' ошибка

Но это не сработает, если я сначала инициализирую или назначу его.Оба не работают.

Мой код, ошибка в первой строке:

private geoCoder = new google.maps.Geocoder();

  @ViewChild('search', { static: false })
  public searchElementRef: ElementRef;

  constructor(private maps: MapsAPILoader, private ngZone: NgZone){ }

  ngOnInit() {
    // Load places autocomplete
    this.maps.load().then(() => {
      this.setCurrentLocation();

      let autocomplete = new google.place.Autocomplete(this.searchElementRef.nativeElement, {
        types: ["address"]
      });

      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          // Get the place result
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();

          // Verify result
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          // Set latitude, longitude & zoom
          this.userLat = place.geometry.location.lat();
          this.userLng = place.geometry.location.lng();
          this.zoom = 12;
        });
      });
    });
  }

  // Get Current Location Coordinates
  private setCurrentLocation() {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.userLat = position.coords.latitude;
        this.userLng = position.coords.longitude;
        this.zoom = 15;
      });
    }
  }

getaddress(latitude, longitude) {
    this.geoCoder.geocode({ "location": { lat: latitude, lng: longitude } }, (results, status) => {
      console.log(results);
      console.log(status);

      if (status === "Ok") {
        if (results[0]) {
          this.zoom = 12;
          this.address = results[0].formatted_address;
        } else {
          window.alert("No results found.");
        }
      } else {
        window.alert("Something went wrong, please try again.");
      }
    });
  }

С (прокрутите вниз до панели поиска местоположений / мест):

https://www.freakyjolly.com/angular-7-6-add-google-maps-in-angular-2-plus-applications-using-angular-google-maps-module-agm-core-easily/

Как предотвратить аварию?Спасибо!

РЕДАКТИРОВАТЬ: Исправлено: https://stackblitz.com/edit/angular-rhbjrx

Answer 1

Ошибка возникает с момента инициализации Geocoder, Google Maps API еще не загружен. В Angular Google Maps библиотека MapsAPILoader может использоваться для обеспечения загрузки API Карт Google и последующей инициализации Geocoder:

this.mapsAPILoader.load().then(() => {
   this.geoCoder = new google.maps.Geocoder;  
});

Вот пример (адаптированный из официального примера Службы геокодирования ), который демонстрирует, как использовать Службу геокодирования Goolge Maps с Angular Google Maps

export class AppComponent implements OnInit {
  center = {lat: -34.397, lng: 150.644};
  position= {lat: null, lng: null};
  zoom: number = 8;
  address: string;
  private geoCoder;


  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone
  ) { }


  ngOnInit() {
    this.mapsAPILoader.load().then(() => {
       this.geoCoder = new google.maps.Geocoder;  
    });
  }


  geocodeAddress(addressInput) {
    const address = addressInput.value;
    this.geoCoder.geocode({'address': address}, (results, status) => {
          if (status === 'OK') {
            this.position = {
              "lat": results[0].geometry.location.lat(),
              "lng": results[0].geometry.location.lng()
            }
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
    });
  }

}

А вот и демо

Answer 2

Необходимо убедиться, что вы правильно указали оператор импорта и используете правильную библиотеку.

Поскольку геокодер не определен в @agm, но определен в @types/googlemaps, и вам необходимо загрузить егоесли у вас его нет: npm install --save @types/googlemaps.

Используйте этот оператор импорта: import { } from 'googlemaps'; после того, как вы создали этот файл, index.d.ts в вашей папке src или в корневой папке и объявили внутри нее следующее:

index.d.ts

declare module "googlemaps";

И убедитесь, что вы поставили скобки со своим геокодером: Geocoder().

Это должно решить проблему, как и для меня.

См. https://stackblitz.com/edit/angular-rhbjrx

Answer 3

Подождите, пока загрузчик карты, а затем присвойте Geocoder() в ngOnInit():

this.mapsAPILoader.load().then(() => {
      this.setCurrentLocation();
      this.geoCoder = new google.maps.Geocoder;
  .....
}

Обязательно установите:

npm install @types/googlemaps --save-dev

Edit:

Правильно импортировать в module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AgmCoreModule } from '@agm/core';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ 
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyCnn-_D68N95BaSpYRYn1E3N_DHGs1vz0Y',
      libraries: ["places"]
    }),
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
   ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }