Як обмежити результати автозаповнення google лише містом та країною

198

Я використовую JavaScript для автозаповнення google для повернення запропонованих результатів для свого вікна пошуку. Мені потрібно лише показати місто та країну, що стосуються введених символів, але 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>

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 альфа-2 можна використовувати для обмеження результатів певними групами. В даний час ви можете використовувати компонентні обмеження для фільтрації по країні.

Країна має бути передана як двозначний, ISO 3166-1 Alpha-2 сумісний код країни.

Офіційно присвоєні коди країн

— Франсуа
джерело

Чи знаєте ви, чи є обмеження на використання запитів на автоматичне завершення, якщо я не завантажую жодної карти? Я знаю, що є 25 000 обмежень використання, якщо я завантажую карти

— Мітіль,

4

Це серпень 2014. Чи можна вже показувати лише країни та міста? Наприклад, коли я набираю Mil, результат - Мілан, Бергамо, Італія. Мені потрібен лише Мілан, Італія. Додавання всіх країн по одній не є можливим.

— erdomester

2

Чи можна вказати більше однієї країни?

— барт

2

@bart, мабуть, це неможливо. Будь-ласка, позначте цю проблему, якщо ви хочете цю функцію.

— dlsso

1

якщо ми використовуємо типи: ['(міст)'], це не дозволить нам шукати тут поштовий індекс.

— Mohneesh Agrawal

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 "

Змініть це на: "region = in" (in = india)

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

— Равіндра
джерело

Нам потрібен список міст, список штатів, перелік областей тощо

— Shadab K

Це має бути прийнятою відповіддю. Найпростіший і найшвидший спосіб досягти результату, про який задається ОП. і це працювало на мене.

— користувач2056633

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

Я трохи погрався з API автозаповнення Google, і ось найкраще рішення, яке я можу знайти, щоб обмежити ваші результати лише країнами:

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, який буде містити кілька об'єктів, що представляють різні частини адреси. У кожному з цих об'єктів він буде містити масив "типів", а в межах цього масиву "типи" ви побачите різні мітки, пов'язані з адресою, включаючи одну для країни.

— шматок
джерело

Чи є спосіб обмежитися лише певними штатами США або навіть виключити окремі штати?

— Мартін Ерлік

@santafebound Я намагаюся зробити те саме (для конкретного штату Австралії). З документації виглядає відповідь «Ні ще [t]», але я сподіваюся знайти спосіб перехопити 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);
            }
        }
    });
});

це рішення показують лише місто та країна ..

— Cenk YAGMUR
джерело

Чи можете ви надати повний список кодів із автозаповненням

— Володимир Хміль

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>

Для отримання додаткової інформації перейдіть за цим посиланням

— Хіна Ваджа
джерело