web-dev-qa-db-ja.com

Angular2名前空間 'google'が見つかりません

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

私が得ている問題は、Observer<google.maps.GeocoderResult[]>を使用しようとすると、google変数が認識されないことです。サービスクラス以外にもdeclare var google: any;があります。

google変数はmap.componenet.tsで機能しますが、maps.service.tsで認識されません。

google-mapsangulartypescriptangular-cliangular2-google-maps
26
Milo

私はついに問題を理解しましたが、それが問題だとは知りませんでした。サービスを参照していたコンポーネントの名前はmap.component.tsサービスファイルの名前はmaps.service.tsの末尾にsが付いたmap。ファイルとimportステートメントを変更した後、すべてが正常に機能しました。

1
Milo

私が試したのと同じ問題に直面していました：

declare var google: any;

しかし、私にはうまくいきませんでした。
これを見つけました answer そしてそれは私のために働きました。
最初に、Googleマップのタイピングをインストールしたことを確認してください
npm install @types/googlemaps --save --dev

--devフラグは非推奨です。つかいます npm install @types/googlemaps --save-dev

そして、あなたのコントローラーで

import {} from '@types/googlemaps';
53
Ayman Sharaf

角度6と7の手順（他のすべてのAngularバージョン）でも機能するはずです）：

  1. npm install @types/googlemaps --save-dev
  2. tsconfig.app.jsonのtsconfig.spec.jsonの型配列にそれぞれgooglemapsを追加します
  3. Npmサーバーを再起動します

最終的には次のようになります。

enter image description here

コンポーネントから両方の宣言タイプを削除できます。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);
});
43
Zsolt Tolvaly

追加

declare var google: any;

typeScriptインポート後

こちらもご覧ください https://github.com/SebastianM/angular2-google-maps/issues/689

8
Günter Zöchbauer

この問題で他の誰かの苦しみを防ぐため。

npm install @google/maps

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

その後：

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

基本的に、パッケージ@google/mapsからgoogleオブジェクトをインポートしています。

@types/googlemapsが機能しなくなった後、2018年にテストされました。

5
clse

それも私のために働いています：

まず、プロジェクトのルートにあるcmdでgoogleマップのtypingsをインストールします

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

そして、.ts以下のコンポーネントファイル：

import {} from '@types/googlemaps';
3
gauravbhai daxini

Angular 6と同様の問題があり、上記のすべての可能な解決策を実行しましたが、運はありません。最後に、googlemapsをtypes内部tsconfig.appおよびtsconfig.specファイル。他の人に役立つことを願っています.

1
chaendler

私の場合、2種類のエラーが発生していました。

  • 名前空間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 }
}
0
odiaz

私の場合、次のようにマップコンポーネントを定義しました。

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;
0
Niral Munjariya
`
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を返すメソッドを持つサービスです。

0
Ramin Ar