引用错误： "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.LatLngBounds等Google Maps对象尚不可用。agm-map附带加载程序，该加载程序异步加载谷歌地图库。

为了确保加载Google Maps API，可以使用MapsAPILoader服务，如下所示：

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);
});
}
}

这里有一个演示，演示如何为给定的边界拟合地图