开发者问题收集

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

2019-06-27
3412

我想获取文本框中输入地址的 LatLng。我使用谷歌地图 API 来实现。仅通过编写 new 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>

请帮帮我。

2个回答

我遇到了同样的问题,我忘记在密钥后添加 &libraries=places src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"

Shahzaib Naseer
2022-03-11

错误是由于未创建“autocomplete”对象造成的。

  • 您需要为“input”标签定义一个 id。
  • 仅为您提供一个基本示例。

HTML:

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

JS:

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

有关更多详细信息,请参阅文档 google api autocomplete

Saima Haji
2019-06-27