Fatal编程技术网
  • javascript/
  • Javascript 如何将谷歌自动完成结果限制在城市和国家

Javascript 如何将谷歌自动完成结果限制在城市和国家

javascript autocomplete google-maps-api-3

Javascript 如何将谷歌自动完成结果限制在城市和国家,javascript,autocomplete,google-maps-api-3,Javascript,Autocomplete,Google Maps Api 3,我正在使用google autocomplete places javascript为我的搜索框返回建议结果，我需要的是只显示与输入字符相关的城市和国家，但google api将提供许多我不需要的一般地点结果，因此如何限制结果仅显示城市和国家 我使用以下示例： <html> <head> <style type="text/css"> body { font-family: sans-serif; font-size:

我正在使用google autocomplete places javascript为我的搜索框返回建议结果，我需要的是只显示与输入字符相关的城市和国家，但google 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>


身体{
字体系列：无衬线；
字体大小：14px；
}
GoogleMapsJavaScriptAPI v3示例：放置自动完成
函数初始化（）{
var input=document.getElementById（'searchTextField'）；
var autocomplete=new google.maps.places.autocomplete（输入）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；


身体{
字体系列：无衬线；
字体大小：14px；
}
GoogleMapsJavaScriptAPI v3示例：放置自动完成
函数初始化（）{
var input=document.getElementById（'searchTextField'）；
变量选项={
类型：['geocode']//应该可以！
};
var autocomplete=new google.maps.places.autocomplete（输入，选项）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
您可以尝试国家/地区限制

function initialize() {

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

 var input = document.getElementById('searchTextField');
 var autocomplete = new google.maps.places.Autocomplete(input, options);
}
更多信息： 可用于将结果限制到特定组。目前，您可以使用componentRestrictions按国家/地区进行筛选。

国家/地区必须作为两个字符的ISO 3166-1 Alpha-2兼容国家/地区代码传递。

我一直在玩弄Google Autocomplete 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
    }
  }
}

var autocomplete=new google.maps.places.autocomplete（输入，选项）；
var result=autocomplete.getPlace（）；
console.log（结果）；//看看这个结果对象
console.log（result.address_组件）；//结果有多个地址组件
对于（变量i=0；i
如果查看返回的结果对象，您将看到一个address_components数组，其中包含多个表示地址不同部分的对象。在每个对象中，它将包含一个“类型”数组，在此“类型”数组中，您将看到与地址关联的不同标签，包括一个国家/地区标签。

此外，由于您所在国家/地区的限制，您还需要缩放地图并将其居中

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

试试这个 

身体{
字体系列：无衬线；
字体大小：14px；
}
GoogleMapsJavaScriptAPI v3示例：放置自动完成
函数初始化（）{
var input=document.getElementById（'searchTextField'）；
var autocomplete=new google.maps.places.autocomplete（输入）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；


使用googlecompleteapi的示例
$（函数（）{
$（“#geocomplete”）.geocomplete（）；
});
有关更多信息，请访问

Francois提供的结果列出了一个国家的所有城市。但如果要求列出一个国家/地区的所有地区（城市+州+其他地区等）或该国家/地区的机构，则可以通过更改类型相应地过滤结果

仅列出该国的城市

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };
列出全国所有城市、州和地区

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

  var options = {
      types: ['establishment'],
      componentRestrictions: {country: "us"}
     };
列出该国的所有机构，如餐厅、商店和办公室

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

  var options = {
      types: ['establishment'],
      componentRestrictions: {country: "us"}
     };
有关更多信息和选项，请访问

希望这可能对某人有用

我为自己找到了一个解决方案

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

var acService=new google.maps.places.AutocompleteService（）；
var自动完成项=[]；
acService.getPlacePredictions({
类型：['（区域）]
}，功能（预测）{
预测。forEach（函数（预测）{
if（prediction.types.some（函数x）{
返回x==“国家”| | x==“行政区域1”| | x==“地区”；
})) {
if（预测项长度<3）{
自动完成项推送（预测）；
}
}
});
});
此解决方案仅显示城市和国家。

与公认答案基本相同，但更新了新类型和多个国家/地区限制：

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：

对于国家/地区，您可以使用以下选项：

components=country:pak

https://maps.googleapis.com/maps/api/place/autocomplete/json?&input=${text-to-search}&key=${API_KEY}&language=en&components=country:pak
请直接从谷歌上查看这段代码。他们制作了一个过滤示例，autocomplete对象不会接受两个变量，只能接受一个变量，即“地理编码”。我不知道如何解决这个问题。谷歌文档列出了很多类型，但没有一个可以接受。相同的参数是否适用于
自动完成服务
？如果我不加载任何地图，您知道自动完成查询是否有任何使用限制吗？我知道，如果我在2014年8月加载mapsIt，将有25000个使用限制。是否已经可以只显示国家和城市？例如，当我输入Mil时，结果是米兰、贝加莫、意大利。我只需要米兰，意大利。逐个添加所有国家不是一个选项。是否可以指定多个国家？@bart显然不可能。如果您需要该功能，请使用星号。如果我们使用类型：['（城市）”，则它将不允许我们搜索b