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

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

使用与您的代码非常相似的代码，我一直遇到同样的错误。

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

"#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 密钥导入到正确的组件中。请参阅上面的文章以供参考。