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

Проблема, которую я получаю, заключается в том, что переменная google не распознается при попытке использовать Observer<google.maps.GeocoderResult[]>. У меня есть declare var google: any; вне класса обслуживания.

Переменная google работает в моем map.componenet.ts, но не распознается в maps.service.ts.

ОТВЕТЫ

Ответ 1

Наконец-то я выяснил проблему, о которой я не знал. Мой компонент, на который я ссылался на службы, был назван map.component.ts, а мой файл служб был назван maps.service.ts с s в конце map. После того, как я изменил файл и import, все работало нормально.

Ответ 2

Я столкнулся с той же проблемой Я пробовал:

declare var google: any;

Но это не сработало для меня.
Я нашел этот ответ, и это сработало для меня.

Сначала убедитесь, что вы установили типы для карт google
npm install @types/googlemaps --save --dev

- флаг dev устарел. Используйте npm install @types/googlemaps --save-dev

И затем в вашем контроллере

import {} from '@types/googlemaps';

Ответ 3

Angular 6 & 7 шагов (также должно работать для любой другой версии Angular):

  1. npm install @types/googlemaps --save-dev
  2. Добавьте googlemaps в массив типов в tsconfig.app.json соответственно в tsconfig.spec.json
  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);
});

Ответ 5

Чтобы предотвратить больше страданий кого-либо еще с этой проблемой.

npm install @google/maps

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

ЗАТЕМ:

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

По сути, мы импортируем объект Google из пакета @google/maps.

Протестировано в 2018 году после @types/googlemaps перестал работать @types/googlemaps.

Ответ 6

Он работает и для меня:

Сначала установите typings для карт google в cmd в корневом каталоге проекта

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

И затем добавьте в свой файл .ts ниже:

import {} from '@types/googlemaps';

Ответ 7

У меня похожая проблема с Angular 6, и я сделал все возможные решения, упомянутые выше, но не повезло. Наконец, мне удается решить эту проблему, добавив googlemaps в types внутри tsconfig.app и tsconfig.spec. Надеюсь, это поможет другим.

Ответ 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;

Ответ 9

В моем случае я получал 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 }
}

Ответ 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();
          }
        });
      });
    });
  }
}'

Это сервис с методом получения адреса и возврата данных по локальной сети.