google object undefined using angular2-google-maps 和 google places searchbar

Question

我目前正在开发一个使用 Google 地图的 angular2 应用程序。

我已经使用优秀的 sebm angular2-google-maps 模块将 Google 地图的实例嵌入到应用程序中。

我现在遇到的问题是我想使用 google 地方自动完成搜索栏。

我已经像这样将模块导入到我的地图模块中：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AgmCoreModule } from 'angular2-google-maps/core';
import { MapComponent } from './map.component';

@NgModule({
  imports: [
    CommonModule,
    AgmCoreModule.forRoot({
      apiKey: '************************',
      libraries: ['places']
    })
  ],
  declarations: [MapComponent]
})
export class MapModule { }

地图本身效果很好。然而，我能找到的所有文档（例如这个 thread ）都说 'google' 对象现在应该存在于全球范围内，我应该能够通过简单地在我的组件中声明它来获得它，即

declare var google: any;

当我尝试这样做然后尝试使用 google 对象时，例如

console.log(google);

...它给我的错误是 google 未定义。

Answer 1

Angular 在 index.html 加载后运行。如果你在 ngOnInit 中放了一些东西（更好的可能是 ngAfterViewInit）那么 document.ready 应该已经被解雇了。

如果您的脚本标签上有一个 async 或 defer 标签获取 google 库，唯一可能出错的方法是。

更好的解决方案是使用 node 安装 google 地图，并在需要时设置你用来获取 google 库的任何加载程序（使用密钥 googlemaps).然后你可以在你的 PlacesComponent 中放置一个 import "googlemaps" 以确保库已加载

Answer 2

您可以在 ngAfterViewInit 事件处理程序中使用该对象。它在视图加载后触发。

Answer 3

您需要将 MapsAPILoader 注入您的 class，然后调用加载方法。

在加载程序完成之前，google 对象将无法访问。

示例：

构造函数（私有 _mapsAPILoader：MapsAPILoader）{ }

ngAfterViewInit() {
  this._mapsAPILoader.load().then(() => {
    // Place your code in here...
  });
}

此答案由 amiller29au 通过 github here 提供 - 复制以供更广泛访问。

google object undefined using angular2-google-maps 和 google places searchbar

google object undefined using angular2-google-maps and google places searchbar

javascript

google-maps

google-places

angular