我一直在努力工作几个小时，试图使谷歌地图的工作PlaceResult在我的 Angular 2 项目中使用Angular-cli.
我必须使用 @types 安装googlemaps并将其添加到我的tsconfig.json配置文件的属性"types"下。
{
...
"types": [
"google-maps"
]
}
}
我成功地在我的 Angular 2 组件中使用了google.maps.places.PlaceResult只需导入它！
import { ActivatedRoute, Params } from "@angular/router";
import { MapsAPILoader } from "angular2-google-maps/core";
import PlaceResult = google.maps.places.PlaceResult;
import GeocoderRequest = google.maps.GeocoderRequest;
...
几个小时后，我不得不使用google.maps.Marker，它与PlaceResult和GeocoderRequest位于同一定义文件中。所以我简单地导入如下：
[Line 12] import PlaceResult = google.maps.places.PlaceResult;
[Line 13] import GeocoderRequest = google.maps.GeocoderRequest;
[Line 14] import Marker = google.maps.Marker;
[Line 15] import LatLng = google.maps.LatLng;
...
但是我在运行时遇到了一个意外的错误，说
Uncaught ReferenceError: google is not defined search.component.ts:14
at Object.444 (search.component.ts:14)
at __webpack_require__ (bootstrap 26c2b97…:52)
at Object.727 (app.config.ts:11)
at __webpack_require__ (bootstrap 26c2b97…:52)
at Object.602 (src async:7)
at __webpack_require__ (bootstrap 26c2b97…:52)
at Object.1258 (.*$:7)
at __webpack_require__ (bootstrap 26c2b97…:52)
at webpackJsonpCallback (bootstrap 26c2b97…:23)
at main.bundle.js:1
请注意，webpack 在我的组件的第14 行抛出此错误。这意味着(如果我错了，请纠正我)前面的行(使用相同的"谷歌")效果很好。
我错过了什么？
我使用 ：
- 角度 ：2.4
- 角度-CLI ：1.0.0-beta.24
- 打字稿 ：2.0.10
- 角度2-谷歌地图：0.17.0
更新
关于导入LatLngBounds = google.maps.LatLngBounds;我发现我在 Maps api 初始化之前调用了 custructor (new LatLngBounds())。事实上，我正在使用@agm/core;.构造函数必须在load()之后调用，如下所示
ngOnInit() {
this.mapsAPILoader.load().then(() => {
this.page$.subscribe(page => {
if (page && page.content) {
this.latLngBounds = new google.maps.LatLngBounds();
page.content.forEach(w => this.latLngBounds.extend(new google.maps.LatLng(lat, lng)));
}
});
}
);
}
我在我的输入中添加了以下导入
import {} from '@types/googlemaps';
原答案
我通过以下配置解决了我的问题：
1-包.json
"dependencies": {
...
"googlemaps": "^1.12.0",
...
}
2-tsconfig.json
"types": [
...
"googlemaps"
]
3-并将谷歌api脚本添加到我的索引中.html
<head>
...
</head>
<body>
<app-root>Loading...</app-root>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&language=fr" async defer></script>
</body>
</html>
4-在组件中，像下面这样使用它
declare var google: any;
@Component({
...
})
export class SearchComponent implements OnInit, AfterViewInit {
// Google Maps
bounds: google.maps.LatLngBounds;
markers: google.maps.Marker[];
infoWindow: google.maps.InfoWindow;
}