2016-11-24 69 views
1

我跟着this example (click here),以與谷歌地圖的地方自動完成地址的領域,Angular2/ionic2 angular2 - 谷歌 - 地圖出錯找不到名稱「谷歌」

但它給了以下錯誤:

Can not find name 'google'. 

L53: this.mapsAPILoader.load(). Then (() => { 

L54: let autocomplete = new google.maps.places.Autocomplete 
(this.searchElementRef.nativeElement, { 

我試圖安裝谷歌地圖類型npm install --save @types/google-maps但它沒有結果。

安裝@類型後/谷歌地圖的構建是好的,但是當我luanch我有這樣的錯誤:

Cannot find name 'google' after installing @types/google-maps

我的代碼:

import { FormControl } from '@angular/forms'; 
 
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core'; 
 
import { NavController, NavParams } from 'ionic-angular'; 
 
import { MapsAPILoader } from 'angular2-google-maps/core'; 
 

 

 
@Component({ 
 
    selector: 'page-page2', 
 
    templateUrl: 'page2.html' 
 
}) 
 
export class Page2 implements OnInit { 
 

 
    latitude: number = 51.678418; 
 
    longitude: number = 7.809007; 
 
    zoom: number = 4; 
 

 
    searchControl: FormControl; 
 

 
    @ViewChild("search") 
 
    searchElementRef: ElementRef; 
 

 
    constructor(public navCtrl: NavController, public navParams: NavParams, private mapsAPILoader: MapsAPILoader) { 
 
// some not related to this question code 
 
    } 
 

 
    ngOnInit() { 
 
    //create search FormControl 
 
    this.searchControl = new FormControl(); 
 

 
    //set current position 
 
    this.setCurrentPosition(); 
 

 
    //load Places Autocomplete 
 
    this.mapsAPILoader.load().then(() => { 
 
     let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, { 
 
     types: ["address"] 
 
     }); 
 
     autocomplete.addListener("place_changed",() => { 
 
     //get the place result 
 
     let place: google.maps.places.PlaceResult = autocomplete.getPlace(); 
 

 
     //set latitude and longitude 
 
     this.latitude = place.geometry.location.lat(); 
 
     this.longitude = place.geometry.location.lng(); 
 
     }); 
 
    }); 
 
    } 
 

 
    private setCurrentPosition() { 
 
    if ("geolocation" in navigator) { 
 
     navigator.geolocation.getCurrentPosition((position) => { 
 
     this.latitude = position.coords.latitude; 
 
     this.longitude = position.coords.longitude; 
 
     this.zoom = 12; 
 
     }); 
 
    } 
 
    } 
 

 
}

+0

將'declare var google;'放置在您的'imports'下並放在您的@Component({})'上方時會發生什麼?請給我們提供一些代碼 – Ivaro18

+0

感謝您的反饋。我已經添加了我的代碼 – BeliliF

+0

你可以試試'npm install --save @ types/google-maps'嗎? – Ivaro18

回答

2

運行typings install dt~google.maps --global

as found here

+0

對我來說,執行這兩個指令後,你給我的問題已得到解決: 1. npm install --save @ types/google-地圖 2. typings install dt〜google.maps --global 謝謝@ Ivaro18 – BeliliF