google-maps - Angular2 GoogleMapAPI 自动完成错误无法读取属性 'Autocomplete'

Question

我想在 angularjs2 和 onsenUI2 中使用 GoogleMapAPI 自动完成功能，但我做不到。

这是我的代码:

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

我一直被困在与您的代码非常相似的完全相同的错误上。

我只使用了代码的自动完成部分(没有 map 显示但我的输入调用与你的完全相同)所以我无法完全验证这一点但错误似乎是由输入语句中的这个引起的:

"#search [formControl]="searchControl"

看着这篇文章，我注意到他们如何在输入中使用 id 调用: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 key 导入了正确的组件。请参阅上面的文章以供引用。