Angular2 GoogleMapAPI自动完成错误无法读取属性“自动完成”

Question

我想用GoogleMapAPI自动完成在angularjs2和onsenUI2，但我不能这样做。

这是我的代码：

import { Component, NgModule, OnInit, ViewChild, ElementRef } from '@angular/core'; 
import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms"; 
import { BrowserModule } from "@angular/platform-browser"; 
import { AgmCoreModule, MapsAPILoader } from 'angular2-google-maps/core'; 
// import {GoogleplaceDirective} from '../googleplace.directive'; 
import {NgModel} from '@angular/forms'; 

@Component({ 
selector: 'app-root', 
styles: [` 
    .sebm-google-map-container { 
    height: 300px; 
} 
`], 
template: ` 
    <google-search-bar></google-search-bar> 
    <div class="container"> 
    <div class="form-group"> 
    <input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl"> 
</div> 
<sebm-google-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom"> 
    <sebm-google-map-marker [latitude]="latitude" [longitude]="longitude"></sebm-google-map-marker> 
</sebm-google-map> 
</div> 
`}) 

export class GoogleMap implements OnInit { 

public latitude: number; 
public longitude: number; 
public searchControl: FormControl; 
public zoom: number; 
public fuzzyControl: FormControl; 
public address:string; 

@ViewChild("search") 
public searchElementRef: ElementRef; 

constructor(
    private mapsAPILoader: MapsAPILoader 
) {} 

ngOnInit() { 
//set google maps defaults 
this.zoom = 4; 
this.latitude = 39.8282; 
this.longitude = -98.5795; 

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

//set current position 
this.setCurrentPosition(); 
this.setMapsAPILoader(); 

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

这是错误

Unhandled Promise rejection: Cannot read property 'Autocomplete' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'Autocomplete' of undefined(…) TypeError: Cannot read property 'Autocomplete' of undefined 

Answer 1

我一直被困在用这个代码完全相同的错误，这是非常类似于你。

我只使用代码的自动完成部分（没有地图显示，但我的输入调用与你的完全相同），所以我不能完全验证这一点，但错误似乎是由输入引起的声明：

“＃搜寻[formControl] =” searchControl”

看着这篇文章，我注意到他们是如何使用的输入范围内的号码来电：angular2-google-maps autocomplete not working

所以我删除我的输入语句的一部分它应该看起来像这样：

<input id="address" placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control"> 

而且使用的JavaScript在我的自动完成瞧瞧对于该ID：

this.mapsAPILoader.load().then(() => { 
     let autocomplete = new google.maps.places.Autocomplete(
      <HTMLInputElement>document.getElementById("address"), { 
      types: ['address'] 
     }); 
     autocomplete.addListener('place_changed',() => { 
      this.ngZone.run(() => { 
       // get the place result 
       let place: google.maps.places.PlaceResult = autocomplete.getPlace(); 
       // add map calls here 
      }); 
     }); 
    }); 

改变的是，该错误消失，自动完成作品后希望。希望这对你有用。

要检查的另一件事是您将API密钥导入到正确的组件。请参阅上面的文章以供参考。