如何将谷歌自动完成结果仅限于城市和国家答案

【问题标题】：How to limit google autocomplete results to City and Country only如何将谷歌自动完成结果仅限于城市和国家
【发布时间】：2012-01-07 02:19:00
【问题描述】：

我正在使用 google autocomplete places javascript 为我的搜索框返回建议的结果，我需要的是只显示与输入的字符相关的城市和国家，但 google 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&amp;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>

【问题讨论】：

标签： javascript autocomplete google-maps-api-3

【解决方案1】：

你可以试试国家限制

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 兼容的国家代码。

Officially assigned country codes

【讨论】：

如果我不加载任何地图，您知道自动完成查询是否有使用限制？如果我加载地图，我知道有 25,000 个使用限制
现在是 2014 年 8 月。是否已经可以只显示国家和城市？例如当我输入 Mil 时，结果是 Milan, Bergamo, Italy。我只需要意大利米兰。不能一个一个地添加所有国家/地区。
可以指定多个国家吗？
@bart 显然这是不可能的。如果您想要该功能，请给this issue 加注星标。
如果我们使用 types: ['(cities)'] 则不允许我们在这里按邮政编码搜索。

【解决方案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

【讨论】：

直接从谷歌检查此代码。他们做了一个过滤示例code.google.com/apis/maps/documentation/javascript/…
自动完成对象不会接受两个变量，只能接受一个变量，即'geocode'。我不知道如何解决这个问题。 Google 文档列出了很多类型，但没有一个可以被接受。
相同的参数是否适用于AutocompleteService？

【解决方案3】：

Francois 给出的answer 列出了一个国家的所有城市。但如果要求列出一个国家/地区的所有地区（城市+州+其他地区等）或该国家/地区的机构，您可以通过更改类型来相应地过滤结果。

仅列出该国的城市

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };

列出全国所有城市、州和地区

 var options = {
  types: ['(regions)'],
  componentRestrictions: {country: "us"}
 };

列出该国的所有场所，例如餐厅、商店和办公室

  var options = {
      types: ['establishment'],
      componentRestrictions: {country: "us"}
     };

希望这对某人有用

【讨论】：

【解决方案4】：

试试这个

<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&amp;libraries=places&region=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&region=in" type="text/javascript"

【讨论】：

我们需要城市列表、州列表、地区列表等
这应该是公认的答案。实现OP要求的结果的最简单，最快的方法。它对我有用。

【解决方案5】：

与接受的答案基本相同，但更新了新类型和多个国家/地区限制：

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

【讨论】：

我花了 5 分钟才弄清楚它是 '(regions)' 类型，而不是 'regions' ...

【解决方案6】：

我一直在使用 Google 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”数组中，您将看到与地址相关的不同标签，包括国家标签。

【讨论】：

有没有办法限制美国的某些州，甚至排除某些州？
@santafebound 我正在尝试做同样的事情（对于澳大利亚的特定州）。从文档来看，答案似乎是“No[t yet]”，但我希望找到一种方法来拦截response 对象并通过数据中的其他键来限制它。

【解决方案7】：

我为自己找到了解决方案

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);
            }
        }
    });
});

这个解决方案只显示城市和国家..

【讨论】：

你能提供完整的自动完成代码列表吗

【解决方案8】：

对于国家/地区，您可以使用：

components=country:pak

https://maps.googleapis.com/maps/api/place/autocomplete/json?&input=${text-to-search}&key=${API_KEY}&language=en&components=country:pak

【讨论】：

【解决方案9】：

此外，由于您所在国家/地区的限制，您需要缩放地图并将其居中！

只需使用缩放和中心参数！ ;)

function initialize() {
  var myOptions = {
    zoom: countries['us'].zoom,
    center: countries['us'].center,
    mapTypeControl: false,
    panControl: false,
    zoomControl: false,
    streetViewControl: false
  };

  ... all other code ...

}

【讨论】：

【解决方案10】：

<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&amp;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>

欲了解更多信息，请访问this link

【讨论】：