TypeError：无法读取未定义的属性“地图”（Google 地图放置自动完成 Angular 2）答案

【问题标题】：TypeError: Cannot read property 'maps' of undefined (Google maps places autocomplete Angular 2)TypeError：无法读取未定义的属性“地图”（Google 地图放置自动完成 Angular 2）
【发布时间】：2018-05-13 16:54:18
【问题描述】：

我正在尝试使用 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';

这里是注射：

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

【问题讨论】：

标签： javascript angular google-maps

【解决方案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 吗？

【讨论】：

是的，我确定我安装了它，我什至卸载了它并再次安装，仍然是同样的错误我也按照上面的链接，几乎相同的代码，但我注意到了一些东西，我应该找到 @types/googlemaps在 node_modules 中？因为它不存在
我在 package.json 文件夹的 dev 依赖项中找到了 @types/googlemaps，但仍然给我同样的错误
@M.Gamie 我创建了一个 stackblitz 示例：stackblitz.com/edit/angular-5-example-zswbff 对我来说，一切正常。
嘿 Taras 是的，我使用 webpack、angular/cli，我什至尝试了你的示例代码仍然给我同样的错误！！！
@M.Gamie 在 stackblitz 上一切正常，您只需输入您的 api_Key

【解决方案2】：

我想通了，我用了：

declare var google

而不是：

import { google } from '@agm/core/services/google-maps-types'

它工作得很好，我对此没有明确的解释，但它工作得很好

【讨论】：

这是生活技巧，我不建议在 PROD 上使用它。这意味着您尝试从全局对象中获取 google 对象。可能是冲突或不正确的行为

【解决方案3】：

听起来你没有 npm install 类型，试试：

npm install @types/googlemaps

【讨论】：