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

当前回答

我自己找到了解决办法

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

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

其他回答

基本与公认的答案相同,但更新了新的类型和多个国家的限制:

function initialize() {

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

 var input = document.getElementById('searchTextField');
 var autocomplete = new google.maps.places.Autocomplete(input, options);
}

使用“(地区)”而不是“(城市)”可以通过邮政编码和城市名称进行搜索。

见官方文件,表3: https://developers.google.com/places/supported_types

我自己找到了解决办法

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

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

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

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

<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

你可以试试国家限制

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