我使用谷歌自动完成地方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>

当前回答

此外,由于您所在国家的限制,您还需要缩放和居中地图!

只需使用缩放和居中参数!;)

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

  ... all other code ...

}

其他回答

我一直在玩谷歌自动补全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'数组中,您将看到与地址相关的不同标签,包括一个国家。

你可以试试国家限制

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

对于城市,你可以试试这个方法

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"
}

弗朗索瓦给出的答案是列出一个国家的所有城市。但如果要求列出一个国家的所有地区(城市+州+其他地区等)或该国的机构,则可以通过更改类型相应地过滤结果。

只列出国内的城市

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

欲了解更多信息,请访问此链接