ReferenceError：页面刷新后未定义google答案

【问题标题】：ReferenceError: google is not defined After Page RefreshReferenceError：页面刷新后未定义google
【发布时间】：2019-01-08 14:34:19
【问题描述】：

我在我的网站中使用 Google Places API 进行自动建议，首先它工作正常，但是当我刷新特定角度组件上的页面时，它显示错误

ReferenceError: google is not defined

我搜索了许多网站，但没有一个解决方案有效我尝试在index.html 的脚本标签中添加async 和defer 但不起作用

register.component.ts

declare var google: any;
export class RegisterComponent implements AfterViewInit {
   constructor() { }
   ngAfterViewInit() {
      const input = <HTMLInputElement>document.getElementById('googlePlaces');
      const autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
      google.maps.event.addListener(autocomplete, 'place_changed', () => {
       this.place = autocomplete.getPlace();
      })
   }
}

register.component.html

<input id="googlePlaces" type="text" class="input-custom" formControlName="location" placeholder="Enter Place">

我已经在主 index.html 文件中添加了带有有效 API 密钥的脚本，这似乎没问题，因为它在第一次运行时就可以工作

【问题讨论】：

您在加载之前尝试使用 google。

标签： javascript angular google-maps angular6

【解决方案1】：

您没有使用正确的方式以角度初始化谷歌地图

看看这段代码，你会在谷歌上找到你的快乐:)

this._mapsAPILoader.load().then(() => {
      let autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocompleteInput'), {});
      google.maps.event.addListener(autocomplete, 'place_changed', () => {
        this._ngZone.run(() => {
          const place = autocomplete.getPlace();
          ...
       });
     ...
   });

mapsAPILoader 和 ngZone 必须添加到构造函数中

 constructor(
      private _mapsAPILoader: MapsAPILoader,
      private _ngZone: NgZone) { }

如果有帮助，请不要犹豫；)

【讨论】：

使用@agm/core 你想使用哪个版本的谷歌地图？
实际上我是通过 google 提供的 cdn 脚本文件导入 google maps api，因为我们在 javascript 中使用它，但现在我安装了 agm/core 并且它工作了 Thnx
你可以让它工作，但你必须使用文档就绪或角度事件/承诺重新实现这种等待功能

【解决方案2】：

你可以试试：

let listen; 
    this._mapsAPILoader.load().then(() => {
      let autocomplete = new  google.maps.places.Autocomplete(document.getElementById('autocompleteInput'), {});
      listen = google.maps.event.addListener(autocomplete, 'place_changed', () => {
        this._ngZone.run(() => {
          const place = autocomplete.getPlace();
          ...
       });
     ...
   });
...
        google.maps.event.removeListener(listen); // then you can reload autocomplete without problens

【讨论】：