使用 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