javascript - 类型错误 : Cannot read property 'maps' of undefined (Google maps places autocomplete Angular 2)

Question

我正在尝试通过 Angular 5 使用谷歌地图自动完成功能，我遵循了 http://myangularworld.blogspot.com.eg/2017/07/google-maps-places-autocomplete-using.html 中的本教程，并且由于某种原因运行后无法识别谷歌

这些是我的进口:

import { .... NgZone }
import { MapsAPILoader } from '@agm/core';
import { } from '@types/googlemaps';
import { google } from '@agm/core/services/google-maps-types';

这是注入(inject):

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

这是 ngonit 中的主要功能:

ngOnInit() {
this.mapsAPILoader.load().then(() => {
  const autoComplete = new google.maps.places.AutoComplete(this.searchElement.nativeElement, { types: ['address'] });
  autoComplete.addListener('place_changed', () => {
    this.ngZone.run(() => {
      const places: google.maps.places.PlaceResult = autoComplete.getPlace();
      if (places.geometry === undefined || places.geometry === null) {
        return;
      }
    });
  });
});

这里是错误:

TypeError: Cannot read property 'maps' of undefined

Answer 1

让我们看一下:

...
// import this two modules and all should be fine.
import { } from 'googlemaps';
import { MapsAPILoader } from '@agm/core';
...
constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone
  ) {}

    ngOnInit() {
this.mapsAPILoader.load().then(() => {
  const autoComplete = new google.maps.places.AutoComplete(this.searchElement.nativeElement, { types: ['address'] });
  autoComplete.addListener('place_changed', () => {
    this.ngZone.run(() => {
      const places: google.maps.places.PlaceResult = autoComplete.getPlace();
      if (places.geometry === undefined || places.geometry === null) {
        return;
      }
    });
  });
});

此外，您还需要安装下一个 npm:

$ npm install @agm/core --save
$ npm install @types/googlemaps --save-dev

希望对您有所帮助。 http://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete/

UPD

我创建了一个 stackblitz 示例:https://stackblitz.com/edit/angular-5-example-zswbff 对我来说，一切正常。

你用过webpack、angular/cli吗？