angular - 使用 Angular 指定 Google Places 自动完成的起始位置
问题描述
我正在使用AGM提供的带有 Angular 的 Google Places Autocomplete API 。它工作得很好,但我无法手动设置我的起始位置。这意味着,如果我坐在洛杉矶的电脑前,我希望能够告诉 API 返回结果,就像我在波士顿一样。根据他们的文档,我相信这在谷歌方面是可能的,但我还没有弄清楚如何在我正在使用的 Angular 组件中做到这一点。
任何人都有如何让它工作的提示?以下是我的组件的相关部分。谢谢!
setGoogleMapsAutocomplete() {
this.mapsAPILoader.load().then(() => {
let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
types: ["address"]
});
autocomplete.addListener("place_changed", () => {
this.ngZone.run(() => {
let place = autocomplete.getPlace();
this.address = '';
for (var i = 0; i < place.address_components.length; i++)
{
var addressType = place.address_components[i].types[0];
if (this.hasOwnProperty(addressType)) {
let nameLength = addressType == 'administrative_area_level_1' ? 'short_name' : 'long_name';
this[addressType] = place.address_components[i][nameLength];
}
}
this.error = false;
});
});
});
}
解决方案
显然您一直在使用此示例中的代码https://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete/
您是否尝试添加location
键并将lat,lon
值作为值传递给您作为第二个参数传递给google.maps.places.Autocomplete
. 所以它应该是这样的:
let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
types: ["address"],
radius: 50000,
location: `${this.latitude}, ${this.longitude}`
});
我为您创建了一个 stackblitz 沙箱https://stackblitz.com/edit/angular-google-maps-demo-qwrngk
随意玩,但不要忘记更改 API 密钥,因为我的配额似乎已超过。
更新
您还需要设置要radius
在其中返回位置结果的位置。
推荐阅读
- bash - 运行 bash 脚本时需要整数表达式
- javascript - 如何在 Node-RED 中拆分 JSON 字符串后提取值
- react-native - undefined 不是一个对象(评估'_firebase.firebase.firestore
- amazon-web-services - SQS 上的审核消息
- oracle - 单一模式中的 TDE 多个主加密密钥
- angular - angular7 ag-grid this.http 是未定义的错误
- jekyll - Jekyll CMS 将语言数据文件插入另一个数据文件
- scroll - 如何启用 QBasic 输出窗口的滚动条?
- javascript - 选择下拉列表中的复选框后如何清除 v-autocomplete(多个)搜索输入?
- angular - 如何使用formbuilder获取离子选择多个数据并将其发布为数组