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

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

1 个答案: