如何将Google自动填充结果限制为仅城市和国家/地区

198

我正在使用google自动补全地方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 
— 约翰·塔阿
source

Answers:

372

您可以尝试国家/地区限制

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兼容的国家/地区代码传递。

官方指定的国家/地区代码

— 弗朗索瓦
source
如果我不加载任何地图，您是否知道自动完成查询是否有使用限制？我知道加载地图会有25,000个使用限制
— Mithil
4
2014年8月。是否已经可以仅显示国家和城市？例如，当我键入Mil时，结果是意大利贝加莫的米兰。我只需要意大利米兰。不能一一添加所有国家。
— erdomester 2014年
2
是否可以指定多个国家？
— 巴特2015年
2
@bart显然是不可能的。请明星这个问题，如果你想要的功能。
— dlsso
1
如果我们使用类型：['（city）']，则不允许我们在此处按邮政编码搜索。
— Mohneesh Agrawal
23 

<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

— 非本地化
source
1
直接从Google检查此代码。他们做了一个过滤示例code.google.com/apis/maps/documentation/javascript/…–
— UnLoCo 2011年
自动完成对象将不接受两个变量，只能接受一个变量，即“地理编码”。我不知道如何解决这个问题。Google文档列出了很多类型，但不能接受。
— JohnTaa 2011年
相同的参数适用AutocompleteService吗？
— 史蒂文·阿吉拉尔
12

试试这个 

<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”（印度）

“ http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=in ” type =“ text / javascript”

— 拉文德拉
source
我们需要城市列表，州列表，区域列表等
— Shadab K '18
这应该是公认的答案。实现OP要求的结果的最简单，最快的方法。它为我工作。
— user2056633
9

弗朗索瓦给出的答案导致列出一个国家的所有城市。但是，如果要求列出一个国家或该国家/地区中的所有地区（城市+州+其他地区等），则可以通过更改类型来相应地过滤结果。

仅列出该国的城市 

 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

希望这对某人有用

— 基兰·穆拉里（Kiran Muralee）
source
9

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

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

— seBaka28
source
8

我一直在使用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数组，其中包含几个代表地址不同部分的对象。在每个这些对象中，它将包含一个“类型”数组，并且在该“类型”数组中，您将看到与地址关联的不同标签，包括一个国家/地区的标签。

— m
source
有没有办法只限制美国的某些州，甚至排除某些州？
— Martin Erlic
@santafebound我正在尝试做同样的事情（针对澳大利亚的特定州）。从文档看来，答案是“否”，但我希望找到一种方法来拦截response对象并通过数据中的其他键限制对象。
— GT。
4

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

只需使用缩放和中心参数即可！;）

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

  ... all other code ...

}
— 基尔·马祖（Kir Mazur）
source
4

我为自己找到了解决方案

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

此解决方案仅显示城市和国家。

— 塞恩·亚姆古尔
source
您能否提供带有自动完成功能的完整代码列表
— Volodymyr Khmil
2 
<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>

有关更多信息，请访问此链接

— 希娜·瓦哈（Hina Vaja）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.