angular - 引用错误 : "google is not defined"

Question

我用 Angular Google Maps在我的 Angular 7 应用程序中显示谷歌地图。

我需要谷歌地图打字来做这样的事情:

allowedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(51.130739, -0.868052), // SW
    new google.maps.LatLng(51.891257, 0.559417) // NE
);

所以我做了 npm install --save-dev @typings/googlemaps
我尝试了许多不同的方法来尝试解决错误，但没有一个对我有用。

import {} from 'googlemaps'
declare const google: any; 

在 tsconfig.json 我有 "typeRoots": ["node_modules/@types"]在 tsconfig.app.json "types": ["googlemaps"]
该应用程序编译没有错误，但在 chrome 控制台中出现错误:
ERROR ReferenceError: "google is not defined"

Answer 1

这个错误很可能发生在 allowedBounds 的那一刻。正在初始化，Google Maps API 尚未加载，因此 Google Maps 对象如 google.maps.LatLngBounds尚不可用。 agm-map与 loader 一起发货它异步加载谷歌地图库。

为了确保加载 Google Maps API， MapsAPILoader service可以使用如下所示:

export class AppComponent  {
  bounds = null;

  constructor(private mapsAPILoader: MapsAPILoader) {
    this.mapsAPILoader.load().then(() => {
      this.bounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(51.130739, -0.868052), // SW
        new google.maps.LatLng(51.891257, 0.559417) // NE
      );
      console.log(this.bounds);
    });
  }

}

Here is a demo它演示了如何为给定的边界拟合 map