javascript - 将谷歌自动完成输出仅限于城市
问题描述
我有以下代码使用谷歌自动完成 api 查找来自给定国家的城市:
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false&libraries=places®ion=uk" type="text/javascript"></script>
function initialize() {
var input = document.getElementById('searchTextField');
var options = {
types: ['(cities)'],
componentRestrictions: { country: "uk" }
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
我在脚本 src 中添加了区域,以免在输出中包含国家/地区。
例如,如果我输入 Lo,我只会得到 London 而不是 London, UK
但是,由于我从下拉列表中获取国家及其 ISO 代码,因此我需要能够更改 google api URL 中的 componentRestrictions 和区域。知道怎么做吗?我知道我可以从下拉列表中选择国家,如下所示:
var country= $('#CountryDropdown');
如何将 var country 传递给 componentRestrictions 和 region?
解决方案
我有同样的问题,我通过这个解决了。希望这会帮助你。
<script src="https://maps.googleapis.com/maps/api/js?key=Yourkey&v=3.exp&libraries=places"></script>
function initialize() {
var input = document.getElementById('FullAddress');
var options = {
types: ['address'],
componentRestrictions: { country: 'uk' }
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
// document.getElementById(component).disabled = false;
}
$("#Latitude").val(place.geometry.location.lat());
$("#Longitude").val(place.geometry.location.lng());
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
});
}
推荐阅读
- amazon-web-services - AWS:两个 AZ 中的两个私有子网可以共享同一个 NAT 网关吗?
- javascript - 使用 jquery append 添加 svg 元素
- python - np.multiply() 的源代码位置在哪里
- regex - Perl 多行正则表达式匹配和删除
- .net-core - 将 .NET Core 对象作为每个类型的单例实例注入?
- build - 添加自定义源文件后,在 Segger Embedded Studio 上构建失败,没有说明原因
- vba - VBA Selenium - 等待 iframe 加载
- c++ - 将十六进制值写入文本文件,显示为二进制
- c++ - 任何人都可以澄清一下:在 C++ 中的线程之间是否可靠稳定时钟
- haskell - Haskell - 将返回函子的函数应用到函子上