如何限制谷歌自动完成的结果只有城市和国家
我正在使用谷歌自动完成的地方的JavaScript来返回我的search框的build议结果，我需要的是只显示城市和国家相关的字符input，但谷歌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&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 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兼容国家代码。
正式分配的国家代码
var options = { types: ['geocode'] //this should work ! }; var autocomplete = new google.maps.places.Autocomplete(input, options);
参考其他types： 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="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=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>
我一直在玩谷歌自动完成API的一点点，这里是我可以find的最好的解决scheme，以限制你的结果只有国家：
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”数组中，你会看到与一个地址相关的不同标签，包括一个国家。
弗朗索瓦斯给出的答案是列出一个国家的所有城市。 但是，如果要求列出一个国家或所在国家的所有地区（城市+国家+其他地区等），则可以通过更改types来相应地筛选结果。
仅列出该国的城市
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
希望这可能对某人有用
另外，由于您的国家/地区限制，您还需要缩放和居中地图！
只需使用缩放和中心参数！ ;）
function initialize() { var myOptions = { zoom: countries['us'].zoom, center: countries['us'].center, mapTypeControl: false, panControl: false, zoomControl: false, streetViewControl: false }; ... all other code ... }
<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&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>
有关更多信息，请访问此链接
