9

我正在使用angular2-google-maps和最新版本的Angular2。我正试图将其中一些本地地图组件功能转换为它们自己的文件maps.service.ts中的服务。例如:Angular2找不到名称空间'google'

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中未被识别。

+0

你在哪里输入'google'? –

+0

@GünterZöchbauer内的AppModule:'AgmCoreModule.forRoot({ apiKey: '--key--', 库:[ '地方'] })' – Milo

+0

你需要一个打字稿进口所提供'google'。似乎你从某处复制了代码。你能发表一个链接吗? –

回答

1

我终于想通了这个问题,这是我不知道的是一件事后添加

declare var google: any; 

。我引用服务的组件名为map.component.ts,而我的服务文件名为maps.service.tssmap的末尾。在我更改文件和import声明后,一切正常。

29

我面临同样的问题 我想:

declare var google: any; 

但它没有为我工作。
我发现这个answer,它为我工作。
首先确保你安装了分型谷歌地图
npm install @types/googlemaps --save --dev

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

,然后在你的控制器

import {} from '@types/googlemaps'; 
+1

这个工作对我什么......只是想补充一点,在角2,我接着说:从“@类型/谷歌地图”进口{};'到'@ ngui/map'中的import {NguiMapModule}之后的相同文件;'在我的shared.module.ts中。 – newman

1

这是为我工作也:

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

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

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

import {} from '@types/googlemaps'; 
相关问题