51

我正在使用angular2-google-maps最新版本的 Angular2。我正在尝试将一些本地地图组件功能转换为他们自己文件中的服务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变量在 my中有效,map.componenet.ts但在maps.service.ts.

4

13 回答 13

90

Angular 6 和 7 步骤(也应该适用于所有其他 Angular 版本):

  1. npm install @types/googlemaps --save-dev
  2. 分别将 googlemaps 添加到 types 数组tsconfig.app.jsontsconfig.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);
});
于 2018-09-06T08:49:12.340 回答
60

我遇到了同样的问题:

declare var google: any;

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

--dev 标志已弃用。利用npm install @types/googlemaps --save-dev

然后在你的控制器中

import {} from '@types/googlemaps';
于 2017-05-31T08:07:52.953 回答
19

为了防止其他人因这个问题而遭受更多痛苦。

npm install @google/maps

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

然后:

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

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

@types/googlemaps停止工作后于2018年测试。

于 2018-07-03T10:14:29.017 回答
12

添加

declare var google: any;

在 TypeScript 导入之后

另请参阅https://github.com/SebastianM/angular2-google-maps/issues/689

于 2017-02-22T14:58:03.797 回答
6
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"] 然后重启


错误:地图未正确加载,在 Web 浏览器控制台中您阅读了“Google Maps Javascript API 警告:NoApiKeys”</p>

解决方案:在 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": [] 并且可以工作。它曾经对我有用。

于 2019-10-23T12:09:16.453 回答
3

它也为我工作:

首先typings在项目根目录的cmd中安装for google maps

npm install @types/googlemaps --save --dev

然后在.ts下面添加您的组件文件:

import {} from '@types/googlemaps';
于 2017-12-12T05:31:02.780 回答
3

就我而言,我遇到了两种类型的错误:

  • 找不到命名空间谷歌
  • 找不到名字 google

因为在我的代码中我正在使用:

let autocomplete = new google.maps.places.Autocomplete(...)

let place: google.maps.places.PlaceResult = autocomplete.getPlace();

所以通过添加这个来修复它:

declare var google: any;

declare namespace google.maps.places {
    export interface PlaceResult { geometry }
}
于 2019-02-19T23:12:19.767 回答
2

我对 Angular 6 也有类似的问题,我做了上面提到的所有可能的解决方案,但没有运气。最后,我设法通过添加googlemapstypes内部tsconfig.apptsconfig.spec文件来解决这个问题。希望对其他人有所帮助。

于 2018-07-26T10:07:28.277 回答
0

注意到为我解决了这个问题。在遵循最高评价的答案之后仍然没有工作,只有在添加这个之后才能工作

npm i @types/googlemaps@3.39.13 --save-dev

确保您之前运行过它,ng serve并确保在服务器运行时重新启动服务器。

于 2021-09-01T17:45:20.977 回答
0

直接解决方案,将“googlemaps”添加到 tsconfig.app.json 中的类型数组。而且我不需要声明任何东西,声明 var google: any;。只需在 tsconfig 中添加 googlemaps 即可。

"types": ["googlemaps"]
于 2020-06-13T18:23:03.023 回答
0

安装参考

npm i -D @types/google.maps

在您的 Typescript 文件的开头添加这一行(意思是第 1 行,之前没有任何内容):

/// <reference types="@types/google.maps" />

三斜线文档

资源

于 2022-02-18T01:42:48.697 回答
0

如果有人正在为此苦苦挣扎,因为即使在安装类型并将它们添加到 tsconfig 之后,Webstorm 也会取消对代码的解析...重新启动 Webstorm。我花了一个小时。

于 2021-02-08T12:28:05.547 回答
-1
`
import { Observable } from 'rxjs';
import { GoogleMapsAPIWrapper, MapsAPILoader } from '@agm/core';
import { Injectable, NgZone } from '@angular/core';
declare var google: any;

@Injectable({
  providedIn: 'root'
})
export class MapService extends GoogleMapsAPIWrapper {
  geocoder: Promise<any>;
  constructor(private __loader: MapsAPILoader, private __zone: NgZone) {
    super(__loader, __zone);
    this.geocoder = this.__loader.load().then(() => new google.maps.Geocoder());
  }

  getLatLan(address: string): Observable<any> {
    return Observable.create(observer => {
      this.geocoder.then((geocoder) => {
        geocoder.geocode({ 'address': address }, (results, status) => {
          if (status === google.maps.GeocoderStatus.OK) {
            observer.next(results[0].geometry.location);
            observer.complete();
          } else {
            console.error('Error - ', results, ' & Status - ', status);
            observer.next({});
            observer.complete();
          }
        });
      });
    });
  }
}`

这是一个具有获取地址并返回 lan 和 lat 的方法的服务。

于 2019-05-03T16:24:19.293 回答