使用google-places时无法读取未定义的属性“自动完成”

Question

我想在文本框中得到输入地址的LatLng。我正在使用谷歌地图api作为它。通过只编写新的google.maps.places.Autocomplete({})，我得到的无法读取未定义的的属性'places‘--这个错误。

下面是我的代码：

@ViewChild('addressText') addressText: any;

ngAfterViewInit() {
   this.getPlaceAutocomplete();
}

getPlaceAutocomplete() {
    const autoComplete = new google.maps.places.Autocomplete(this.addressText.nativeElement, {
      types: this.addressText.nativeElement.value
    })
    // google.maps.event.addListener(autoComplete, 'place_changed', () => {
    //   const place = autoComplete.getPlace();

    //   console.log('places... ', place);
    // })
  }

html文件：

<input matInput placeholder="Locations" class="input" formControlName="text" #addressText>

请帮帮我。

Answer 1

我也面临着同样的问题，我忘记了在关键的&libraries=places src="KEY&libraries=places“之后添加KEY&libraries=places。

Answer 2

错误是因为没有创建“自动完成”对象。

• 您需要为“输入”标记定义一个id。
• 只是给你一个基本的例子。

HTML:

<input matInput placeholder="Locations" class="input" formControlName="text" id="addressText">

JS:

autocomplete = new google.maps.places.Autocomplete(
  document.getElementById('addressText'), {types: ['geocode']});

有关详细信息，请浏览docs google自动完成。