Angular6步：

Question

我正在使用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变量适用于map.componenet.ts，但未在maps.service.ts中识别。

Answer 1

我遇到了同样的问题我试过了：

declare var google: any;

但它对我没用我找到了这个answer，它对我有用。
首先要确保你安装了谷歌地图的类型
npm install @types/googlemaps --save --dev

- 不推荐使用dev标志。使用npm install @types/googlemaps --save-dev

然后在您的控制器中

import {} from '@types/googlemaps';

Answer 2

Angular6步：

npm install @types/googlemaps --save-dev
分别在tsconfig.app.json的{{1}}的types数组中添加googlemaps
重新启动npm服务器

最后应该看起来像这样：

您可以从组件中删除这两种声明类型：tsconfig.spec.json import {} from '@types/googlemaps';您不必包括其中的任何一种。

PS：如果您使用的是agm-s GoogleMapsAPIWrapper.getNativeMap（），则必须先转换地图对象，然后再使用它。例如，打开流量层：

declare var google: any;

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/maps中导入google对象。

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

Answer 5

它也适用于我：

首先在项目根目录的cmd中安装谷歌地图的typings

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

然后在下面的.ts组件文件中添加：

import {} from '@types/googlemaps';

Answer 6

我终于找到了问题，我不知道这是一个问题。我引用服务的组件名为map.component.ts，而我的服务文件名为maps.service.ts，s末尾为map。在我更改文件和import语句后，一切正常。

Answer 7

我对Angular 6有类似的问题，我做了上面提到的所有可能的解决方案，但是没有运气。最后，我设法通过在googlemaps和types文件内的tsconfig.app中添加tsconfig.spec来解决此问题。希望对其他人有帮助。

Answer 8

就我而言，我已定义了地图组件，如下所示：

map: google.maps.Map;
infoWindow: google.maps.InfoWindow = new google.maps.InfoWindow();
marker: google.maps.Marker;
autocomplete: google.maps.places.Autocomplete;
panaroma: google.maps.StreetViewPanorama;

通过将所有组件类型更改为any如下解决了该问题：

map: any;
infoWindow = new google.maps.InfoWindow();
marker: any;
autocomplete: any;
panaroma: any;

Answer 9

就我而言，我遇到两种错误：

找不到Google命名空间
找不到名称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 }
}

Answer 10

`
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的方法的服务。

Answer 11

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’.

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

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> 您可以从这里https://developers.google.com/maps/documentation/javascript/get-api-key

获取API密钥

Answer 12

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

"types": ["googlemaps"]

Answer 13

如果有人为此而苦苦挣扎，因为即使在安装类型并将它们添加到 tsconfig 之后，Webstorm 也未对代码进行减分...重新启动 Webstorm。我花了一个小时。

Angular2无法找到命名空间＆＃39; google＆＃39;

13 个答案:

Angular6步：