Angular2无法找到命名空间'google'

Question

我正在使用angular2-google-mapsAngular2的最新版本.我试图将一些本地地图组件功能转换为自己文件中的服务maps.service.ts.例如:

map.component.ts

getGeoLocation(lat: number, lng: number) {
if (navigator.geolocation) {
    let geocoder = new google.maps.Geocoder();
    let latlng = new google.maps.LatLng(lat, lng);
    let request = { latLng: latlng };
    geocoder.geocode(request, (results, status) => {
      if (status == google.maps.GeocoderStatus.OK) {
        let result = results[0];
        if (result != null) {
          this.fillInputs(result.formatted_address);
        } else {
          alert("No address available!");
        }
      }
    });
}
}

变成这样的东西: maps.service.ts

getGeoLocation(lat: number, lng: number): Observable<google.maps.GeocoderResult[]> {
    let geocoder = new google.maps.Geocoder();
    let latlng = new google.maps.LatLng(lat, lng);
    let request = { latLng: latlng };
    return new Observable((observer: Observer<google.maps.GeocoderResult[]>) => {
        geocoder.geocode({ request }, (
            (results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) => {
                if (status == google.maps.GeocoderStatus.OK) {
                    observer.next(results);
                    observer.complete();
                } else {
                    console.log('Geocoding service failed due to: ' +status);
                    observer.error(status);
                }
            }
        ));
    });
}

我得到的问题是,google当我尝试使用时,变量未被识别Observer<google.maps.GeocoderResult[]>.我也在declare var google: any;服务类之外.

将google在我的变量的作品map.componenet.ts,但没有得到的认可maps.service.ts.

Answer 1

我遇到了同样的问题:

declare var google: any;

但它对我不起作用.
我找到了这个答案,它对我有用.
首先确保您安装了谷歌地图的类型
npm install @types/googlemaps --save --dev

--dev标志已弃用.使用npm install @types/googlemaps --save-dev

然后在你的控制器中

import {} from '@types/googlemaps';

Answer 2

Angular6步骤:

1. npm install @types/googlemaps --save-dev
2. 将googlemaps tsconfig.app.json分别添加到types数组中tsconfig.spec.json
3. 重启npm服务器

最后应该是这样的:

您可以从组件中删除这两种声明类型:import {} from '@types/googlemaps'; declare var google: any;您不必包含任何声明类型.

PS:如果您使用的是agm-s GoogleMapsAPIWrapper.getNativeMap(),则必须在使用之前转换地图对象.例如,打开流量层:

this.apiWrapper.getNativeMap().then(map => {
    this.trafficLayer = new google.maps.TrafficLayer();
    const gMap: any = map;
    this.trafficLayer.setMap(gMap as google.maps.Map);
});

Answer 3

加

declare var google: any;

在TypeScript导入之后

另见https://github.com/SebastianM/angular2-google-maps/issues/689

Answer 4

用这个问题防止其他人遭受更多痛苦.

npm install @google/maps

https://www.npmjs.com/package/@google/maps

然后:

import { google } from '@google/maps';

基本上我们从包中导入google对象@google/maps.

@types/googlemaps停止工作后于2018年进行了测试.

Answer 5

ERROR: [ts] Cannot import type declaration files. Consider importing ‘googlemaps’ instead of ‘@types/googlemaps’

解决方案：更改import {} from ‘@types/googlemaps’;为

/// <reference types=”@types/googlemaps” />

ERROR: while compiling, error TS2304: Cannot find name ‘google’.

解决方案：declare var google: any;在@types/googlemaps 参考下面添加

ERROR: while compiling error TS2503: Cannot find namespace ‘google’.

解决方案：添加到 tsconfig.app.json ："types": ["googlemaps"] 并重新启动

错误：地图未正确加载，您在网络浏览器控制台中阅读“Google Maps Javascript API 警告：NoApiKeys”

解决方案：在 index.html 的 javascript 文件中添加一个有效的 api 密钥，应该如下所示， <script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"></script> 您可以从这里获取 API 密钥https://developers.google.com/maps/documentation/javascript/get-api-key

ERROR:Cannot find name 'google'

好吧，这是在您刚刚安装了以下类型的情况下：

npm i -D @types/google.maps

你尝试使用它们。有时在 tsconfig.app.json 中有空类型数组，这会阻止自动导入。删除 "types": [] 并且可以工作。它对我有用过一次。