javascript - 仅在谷歌地址自动完成时建议完整地址
问题描述
我正在尝试通过js实现google地址自动完成功能。我的实现如下所示。它工作正常,唯一的问题是在搜索地址时,它也建议没有邮政编码的通用地址。我的系统需要的是带有邮政编码的完整地址。见截图https://prnt.sc/wi228m。下面是我目前的实现
// google map and address
var autocomplete;
const componentForm = {
street_number: "short_name",
route: "long_name",
locality: "long_name",
administrative_area_level_1: "short_name",
country: "long_name",
postal_code: "short_name",
};
function googleMapInit() {
autocomplete = new google.maps.places.Autocomplete(
document.getElementById("searchAddressList"),
{ types: ["geocode"] }
);
autocomplete.setFields(["address_component"]);
autocomplete.addListener("place_changed", fillInAddress);
}
google.maps.event.addDomListener(window, 'load', googleMapInit);
function fillInAddress() {
$('#country').val('');
$('#zip').val('');
$('#province').val('');
$('#city').val('');
$('#address').val('');
const place = autocomplete.getPlace()
for (const component of place.address_components) {
const addressType = component.types[0];
if (componentForm[addressType]) {
const val = component[componentForm[addressType]];
switch(addressType) {
case 'country':
$('#country').val(val)
break;
case 'postal_code':
$('#zip').val(val)
break;
case 'administrative_area_level_1':
$('#province').val(val)
break;
case 'locality':
$('#city').val(val)
break;
case 'route':
$('#address').val(val)
break;
}
}
}
}
有人可以建议如何只显示完整地址吗?
解决方案
我找到了解决方案并在这里分享,以便它也可以帮助其他人。
我只需要替换 googleMapInit() 方法上的参数。
请参见下面的代码:
function googleMapInit() {
autocomplete = new google.maps.places.Autocomplete(
document.getElementById("searchAddressList"),
{ types: ["address"],componentRestrictions: {country: 'us'} }
);
autocomplete.setFields(["address_component"]);
autocomplete.addListener("place_changed", fillInAddress);
}
请注意“类型”字段,其参数已更改。这会给你完整的地址。我又添加了一个参数来限制仅针对美国的搜索结果。
推荐阅读
- powershell - Get-ADComputer 仅打印部分名称
- django - 有效地从我的模型中列出第 3 级数据的问题(Django)
- javascript - 如何将对象推入数组角度 8
- python-3.x - 来自数据框的带有子图的多个图形
- python - 将列表的第一个和最后一个元素相加
- bash - 脚本退出时后台作业不干净
- email - 对 Google 表格中的特定数据进行更改时的电子邮件通知
- elasticsearch - Elasticsearch Painless script 的问题
- material-table - 在反应js中从外部材料表单击按钮时在材料表中添加行
- python - 在 Python 中失败时重新连接到 Websocket