如何将谷歌自动填充结果限制为仅限城市和国家/地区
How to limit google autocomplete results to City and Country only
我正在使用谷歌自动完成的地方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>
您可以尝试国家/地区限制
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 按 country.
进行筛选。国家/地区必须作为两个字符传递，ISO 3166-1 Alpha-2 兼容国家/地区代码。<小时 />官方分配的国家/地区代码
<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
弗朗索瓦给出的答案是列出一个国家的所有城市。但是，如果要求列出一个国家/地区中的所有地区(城市 + 州 + 其他地区等(或该国家/地区的机构，则可以通过更改类型来相应地过滤结果。
仅列出该国的城市
var options = {
types: ['(cities)'],
componentRestrictions: {country: "us"}
};
列出该国所有城市、州和地区
var options = {
types: ['(regions)'],
componentRestrictions: {country: "us"}
};
列出该国的所有场所，例如餐馆、商店和办公室
var options = {
types: ['establishment'],
componentRestrictions: {country: "us"}
};
此外，还可以向结果筛选器添加多个类型，如下所示：
列出与学校和药店相同的所有场所，以及社区、地区和次级
地区类型的地点 var options = {
types: ['school','drugstore','neighborhood', 'locality', 'sublocality'],
componentRestrictions: {country: "us"}
};
：查看可用类型，并注意您只能组合表 1 和表 2 中的项目，最多可以合并 5 个项目。表 3 不允许合并。
更多信息和选项，请访问
https://developers.google.com/maps/documentation/javascript/places-autocomplete
希望这可能对某人有用
试试这个
<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">
与接受的答案基本相同，但更新了新类型和多个国家/地区限制：
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
我一直在使用Google自动完成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数组，该数组将包含表示地址不同部分的多个对象。在每个对象中，它将包含一个"类型"数组，在这个"类型"数组中，您将看到与地址关联的不同标签，包括国家/地区标签。
对于国家，您可以使用：
components=country:pak
https://maps.googleapis.com/maps/api/place/autocomplete/json?&input=${text-to-search}&key=${API_KEY}&language=en&components=country:pak
我为自己找到了解决方案
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);
}
}
});
});
此解决方案仅显示城市和国家/地区。
此外，由于您所在的国家/地区限制，您还需要缩放和居中地图！
只需使用缩放和居中参数！ ;)
function initialize() {
var myOptions = {
zoom: countries['us'].zoom,
center: countries['us'].center,
mapTypeControl: false,
panControl: false,
zoomControl: false,
streetViewControl: false
};
... all other code ...
}
<html>
<head>
<title>Example Using Google Complete API</title>
</head>
<body>
<form>
<input id="geocomplete" type="text" placeholder="Type an address/location"/>
</form>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
<script>
$(function(){
$("#geocomplete").geocomplete();
});
</script>
</body>
</html>
有关更多信息，请访问此链接
对于城市，你可以试试这个
https://maps.googleapis.com/maps/api/place/autocomplete/json?input=new delhi&types=locality&key=Your_API_Key
响应
{
"predictions": [
{
"description": "New Delhi, Delhi, India",
"matched_substrings": [
{
"length": 9,
"offset": 0
}
],
"place_id": "ChIJLbZ-NFv9DDkRzk0gTkm3wlI",
"reference": "ChIJLbZ-NFv9DDkRzk0gTkm3wlI",
"structured_formatting": {
"main_text": "New Delhi",
"main_text_matched_substrings": [
{
"length": 9,
"offset": 0
}
],
"secondary_text": "Delhi, India"
},
"terms": [
{
"offset": 0,
"value": "New Delhi"
},
{
"offset": 11,
"value": "Delhi"
},
{
"offset": 18,
"value": "India"
}
],
"types": [
"locality",
"political",
"geocode"
]
},
{
"description": "New Delhi, Madhya Pradesh, India",
"matched_substrings": [
{
"length": 9,
"offset": 0
}
],
"place_id": "ChIJF6eOnlmqhTkR2f8IfiLL4bs",
"reference": "ChIJF6eOnlmqhTkR2f8IfiLL4bs",
"structured_formatting": {
"main_text": "New Delhi",
"main_text_matched_substrings": [
{
"length": 9,
"offset": 0
}
],
"secondary_text": "Madhya Pradesh, India"
},
"terms": [
{
"offset": 0,
"value": "New Delhi"
},
{
"offset": 11,
"value": "Madhya Pradesh"
},
{
"offset": 27,
"value": "India"
}
],
"types": [
"locality",
"political",
"geocode"
]
},
{
"description": "Delhi, NY, USA",
"matched_substrings": [
{
"length": 5,
"offset": 0
}
],
"place_id": "ChIJVS4Od-R43IkRReeLGEBFcv8",
"reference": "ChIJVS4Od-R43IkRReeLGEBFcv8",
"structured_formatting": {
"main_text": "Delhi",
"main_text_matched_substrings": [
{
"length": 5,
"offset": 0
}
],
"secondary_text": "NY, USA"
},
"terms": [
{
"offset": 0,
"value": "Delhi"
},
{
"offset": 7,
"value": "NY"
},
{
"offset": 11,
"value": "USA"
}
],
"types": [
"locality",
"political",
"geocode"
]
}
],
"status": "OK"
}
相关文章：
- 州和城市选择框类似于国家细分页面
- 在 asp.net 中用javascript填充国家和城市下拉列表
- 传递国家名称时获取所有州/地区/城市
- javascript从所选国家/地区值中选择城市
- 使用JavaScript动态选择国家城市
- 显示Maxmind Geoip2显示国家，城市，地区和ISP与Javascript
- 如何在谷歌地图中调整缩放(分别为国家、城市、街道）
- 谷歌地图:如何在多选输入中获得城市+邮政编码+州+国家
- 使用Google api获取城市的州/国家建议
- 天气API，如何组合搜索参数以获得更详细的位置(城市、州、国家等），以防止位置混淆
- 如何为特定城市或国家设计伊斯兰祈祷时间小工具
- 使用 jQuery 根据国家/地区和州填充州和城市下拉列表
- 如何在Angularjs中显示国家、州和城市依赖
- 我怎样才能知道某个城市/国家的经纬度?
- 地图JavaScript API自动完成-一个国家的城市
- 如何将谷歌自动填充结果限制为仅限城市和国家/地区
- 如果国家代码、州和/或城市已知，如何确定时区
- 自动补全和地名:是否可以在单独的输入字段中检索城市、州和国家
- 连锁选择框(国家、州、城市)
- 从城市返回国家名称
