如何将Google自动填充结果限制为仅限城市和国家/地区-Java 学习之路

162

我正在使用谷歌自动填充地点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&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>

9 回答

5
您可以尝试国家限制
```
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
回复于 2024-04-27T01:21:37+08:00

<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

回复于 2024-04-27T01:21:37+08:00

试试这个

<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”

回复于 2024-04-27T01:21:37+08:00

我一直在使用谷歌自动完成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'数组中，你会看到与地址相关的不同标签，包括一个国家 .

回复于 2024-04-27T01:21:37+08:00

1
Francois给出的answer导致列出一个国家的所有城市 . 但是，如果要求列出一个国家/地区的所有地区（城市其他地区等）或国家/地区的企业，您可以通过更改类型来相应地过滤结果 .

List only cities in the country
```
var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };
```
List all cities, states and regions in the country
```
var options = {
  types: ['(regions)'],
  componentRestrictions: {country: "us"}
 };
```
List all establishments — such as restaurants, stores, and offices in the country
```
var options = {
      types: ['establishment'],
      componentRestrictions: {country: "us"}
     };
```
更多信息和选项可在

https://developers.google.com/maps/documentation/javascript/places-autocomplete

希望这可能对某人有用
回复于 2024-04-27T01:21:37+08:00

此外，由于您的国家/地区限制，您需要缩放和居中 Map ！

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

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

  ... all other code ...

}

回复于 2024-04-27T01:21:37+08:00

<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

回复于 2024-04-27T01:21:37+08:00

我找到了自己的解决方案

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

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

回复于 2024-04-27T01:21:37+08:00

310
与接受的答案基本相同，但更新了新类型和多个国家/地区限制：
```
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
回复于 2024-04-27T01:21:37+08:00

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

9 回答

更多信息：

相关问题