Как ограничить результаты автозаполнения Google только для города и страны

198

Я использую JavaScript автозаполнения Google для возврата предлагаемых результатов для моего окна поиска, мне нужно только показать город и страну, относящиеся к введенным символам, но API API Google даст много общих результатов мест, которые мне не нужны, так как ограничить результат, чтобы показать только город и страну.

Я использую следующий пример:

<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>
javascript autocomplete google-maps-api-3 JohnTaa
источник

Ответы:

372

Вы можете попробовать ограничение страны

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.

Официально присвоенные коды стран

Francois
источник
Знаете ли вы, есть ли ограничение на использование автозаполнения запросов, если я не загружаю карты? Я знаю, что если я загружаю карты, есть лимит использования 25 000
Mithil
4
Это август 2014 года. Разве можно уже показывать только страны и города? Например, когда я набираю Mil, результатом будет Милан, Бергамо, Италия. Мне нужен только Милан, Италия. Добавление всех стран одна за другой не вариант.
erdomester
2
Можно ли указать более одной страны?
Барт
2
@ Барт, видимо, это невозможно. Пожалуйста, отметьте эту проблему, если вы хотите эту функцию.
Dlsso
1
если мы используем типы: ['(towns)'], то поиск по почтовому индексу здесь будет невозможен.
Мохниш Агравал
23 

<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

Unloco
источник
1
проверьте этот код прямо из Google. они сделали пример фильтрации code.google.com/apis/maps/documentation/javascript/…
UnLoCo
Объект автозаполнения не будет принимать две переменные, может быть принята только одна переменная, которая является «геокодом». Я не знаю, как решить эту проблему. Список документации Google много типа, но ни один не может быть принят.
JohnTaa
будут ли работать те же параметры AutocompleteService?
Стивен Агилар
12

попробуй это 

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

Измените это на: "регион = в" (в = Индия)

" http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=in " type = "text / javascript"

Ravindra
источник
Нам нужен список городов, список штатов, список областей и т. Д.
Shadab K
Это должен быть принятый ответ. Самый простой и быстрый способ достижения результата, о котором просит ОП. и это сработало для меня.
user2056633
9

Ответ дается по результатам Франсуа перечисляя всех городов из страны. Но если требуется перечислить все регионы (города + штаты + другие регионы и т. Д.) В стране или заведениях в стране, вы можете соответствующим образом отфильтровать результаты, изменив типы.

Список только городов страны 

 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

Надеюсь, что это может быть полезно для кого-то

Киран Мурали
источник
9

В основном такой же, как принятый ответ, но обновленный с новым типом и несколькими страновыми ограничениями:

function initialize() {

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

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

Использование '(regions)'вместо '(cities)'позволяет осуществлять поиск по почтовому индексу, а также по названию города.

См. Официальную документацию, Таблица 3: https://developers.google.com/places/supported_types.

seBaka28
источник
8

Я немного поигрался с 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
    }
  }
}

Если вы посмотрите на возвращаемый объект результата, то увидите, что есть массив address_components, который будет содержать несколько объектов, представляющих разные части адреса. В каждом из этих объектов он будет содержать массив «types», а в этом массиве «types» вы увидите различные метки, связанные с адресом, в том числе для страны.

wmock
источник
Есть ли способ ограничить только определенные штаты в США, или даже исключить отдельные штаты?
Мартин Эрлик
@santafebound Я пытаюсь сделать то же самое (для определенного штата в Австралии). Из документации видно, что ответ «Нет [пока]», но я надеюсь найти способ перехватить responseобъект и ограничить его другими ключами в данных.
GT.
4

Также вам нужно будет увеличить карту и отцентрировать карту из-за ограничений вашей страны!

Просто используйте масштабирование и центральные параметры! ;)

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

  ... all other code ...

}
Кир Мазур
источник
4

Я нашел решение для себя

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

это решение только показать город и страну ..

Дженк ЯГМУР
источник
Можете ли вы предоставить полный список кодов с автозаполнением
Владимир
2 
<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>

Для получения дополнительной информации посетите эту ссылку

Хина важа
источник