Joh*_*Taa 189 javascript autocomplete google-maps-api-3
我正在使用谷歌自动填充地点javascript返回我的搜索框的建议结果,我需要的是只显示与输入的字符相关的城市和国家但谷歌api将给出很多我不需要的一般地方结果,所以如何限制结果只显示城市和国家.
我使用以下示例:
<html>
<head>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
</style>
<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
</div>
</body>
</html>
Fra*_*ois 354
您可以尝试国家限制
function initialize() {
var options = {
types: ['(cities)'],
componentRestrictions: {country: "us"}
};
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
ISO 3166-1 alpha-2可用于将结果限制为特定组.目前,您可以使用componentRestrictions按国家/地区进行过滤.
该国家/地区必须通过两个字符ISO 3166-1 Alpha-2兼容国家/地区代码.
UnL*_*oCo 22
<html>
<head>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
</style>
<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('searchTextField');
var options = {
types: ['geocode'] //this should work !
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
</div>
</body>
</html>var options = {
types: ['geocode'] //this should work !
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
参考其他类型:http://code.google.com/apis/maps/documentation/places/supported_types.html#table2
小智 10
试试这个
<html>
<head>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
</style>
<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=in" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
</div>
</body>
</html>http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"type ="text/javascript"
将其更改为:"region = in"(in = india)
" http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=in"type ="text/javascript"
弗朗索瓦给出的答案导致列出一个国家的所有城市.但是,如果要求列出一个国家/地区的所有地区(城市+州+其他地区等)或国家/地区的企业,您可以通过更改类型来相应地过滤结果.
仅列出该国的城市
var options = {
types: ['(cities)'],
componentRestrictions: {country: "us"}
};
列出该国的所有城市,州和地区
var options = {
types: ['(regions)'],
componentRestrictions: {country: "us"}
};
列出所有机构 - 例如该国的餐馆,商店和办公室
var options = {
types: ['establishment'],
componentRestrictions: {country: "us"}
};
更多信息和选项可在
https://developers.google.com/maps/documentation/javascript/places-autocomplete
希望这可能对某人有用
我一直在使用谷歌自动完成API,这是我能找到的最佳解决方案,只能将结果限制在国家/地区:
var autocomplete = new google.maps.places.Autocomplete(input, options);
var result = autocomplete.getPlace();
console.log(result); // take a look at this result object
console.log(result.address_components); // a result has multiple address components
for(var i = 0; i < result.address_components.length; i += 1) {
var addressObj = result.address_components[i];
for(var j = 0; j < addressObj.types.length; j += 1) {
if (addressObj.types[j] === 'country') {
console.log(addressObj.types[j]); // confirm that this is 'country'
console.log(addressObj.long_name); // confirm that this is the country name
}
}
}
如果你查看返回的结果对象,你会看到有一个address_components数组,它将包含代表地址不同部分的几个对象.在每个对象中,它将包含一个'types'数组,在这个'types'数组中,你会看到与地址相关的不同标签,包括一个国家的标签.
小智 7
对于国家/地区，您可以使用：
components=country:pak
https://maps.googleapis.com/maps/api/place/autocomplete/json?&input=${text-to-search}&key=${API_KEY}&language=en&components=country:pak
与接受的答案基本相同，但已更新为新类型和多个国家/地区限制：
function initialize() {
var options = {
types: ['(regions)'],
componentRestrictions: {country: ["us", "de"]}
};
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
使用'(regions)'而不是'(cities)'允许按邮政编码以及城市名称进行搜索。
请参阅官方文档，表3：https : //developers.google.com/places/supported_types
我为自己找到了解决方案
var acService = new google.maps.places.AutocompleteService();
var autocompleteItems = [];
acService.getPlacePredictions({
types: ['(regions)']
}, function(predictions) {
predictions.forEach(function(prediction) {
if (prediction.types.some(function(x) {
return x === "country" || x === "administrative_area1" || x === "locality";
})) {
if (prediction.terms.length < 3) {
autocompleteItems.push(prediction);
}
}
});
});
此解决方案仅显示城市和国家/地区..