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

当前回答

<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

其他回答

<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

希望这对别人有用

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

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

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

  ... all other code ...

}

我自己找到了解决办法

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

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

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