Jak ograniczyć wyniki autouzupełniania google tylko do miasta i kraju

198

Korzystam z javascript autouzupełniania miejsc Google, aby zwrócić sugerowane wyniki dla mojego pola wyszukiwania, potrzebuję tylko pokazać miasto i kraj związane z wprowadzonymi znakami, ale Google API poda wiele ogólnych wyników miejsc, których nie potrzebuję, więc jak aby ograniczyć wynik, aby pokazywał tylko miasto i kraj.

Korzystam z następującego przykładu:

<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
źródło

Odpowiedzi:

372

Możesz wypróbować ograniczenie kraju

function initialize() {

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

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

Więcej informacji:

ISO 3166-1 alfa-2 może być użyte do ograniczenia wyników do określonych grup. Obecnie można używać funkcji componentRestrictions do filtrowania według kraju.

Kraj należy podać jako dwuliterowy kod kraju zgodny z ISO 3166-1 Alpha-2.

Oficjalnie przypisane kody krajów

Francois
źródło
Czy wiesz, czy są jakieś limity użycia dla automatycznych zapytań, jeśli nie ładuję żadnych map? Wiem, że jeśli załaduję mapy,
obowiązuje
4
Jest sierpień 2014. Czy można już wyświetlać tylko kraje i miasta? Na przykład, gdy wpisuję Mil, wynikiem jest Mediolan, Bergamo, Włochy. Potrzebuję tylko Mediolanu we Włoszech. Dodanie wszystkich krajów jeden po drugim nie jest opcją.
erdomester
2
Czy można podać więcej niż jeden kraj?
Bart
2
@bart najwyraźniej nie jest to możliwe. Oznacz ten problem gwiazdką, jeśli chcesz tę funkcję.
dlsso
1
jeśli użyjemy typów: ['(miasta)'], nie będziemy mogli wyszukiwać według kodu pocztowego tutaj.
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>
Rozwiń fragment kodu

var options = {
  types: ['geocode'] //this should work !
};
var autocomplete = new google.maps.places.Autocomplete(input, options);

odniesienie do innych typów: http://code.google.com/apis/maps/documentation/places/supported_types.html#table2

UnLoCo
źródło
1
sprawdź ten kod bezpośrednio z Google. zrobili przykład filtrowania code.google.com/apis/maps/documentation/javascript/...
UnLoCo
obiekt autouzupełniania nie zaakceptuje dwóch zmiennych, tylko jedna zmienna może być zaakceptowana, czyli „geokod”. Nie wiem jak rozwiązać ten problem. Dokumentacja Google zawiera wiele typów, ale nie można ich zaakceptować.
JohnTaa
czy te same parametry będą działać AutocompleteService?
Steven Aguilar,
12

Spróbuj tego 

<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>
Rozwiń fragment kodu

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

Zmień to na: „region = in” (in = india)

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

Ravindra
źródło
Potrzebujemy listę miast, listę stanów, listę obszarów i tak dalej
Shadab K
To powinna być zaakceptowana odpowiedź. Najprostszy i najszybszy sposób na osiągnięcie wyniku, o który prosi PO. i zadziałało dla mnie.
user2056633
9

Odpowiedź udzielona przez Francois wyników w listę wszystkich miast z kraju. Ale jeśli wymagana jest lista wszystkich regionów (miasta + stany + inne regiony itp.) W kraju lub zakładów w kraju, możesz odpowiednio filtrować wyniki, zmieniając typy.

Wymień tylko miasta w kraju 

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

Wymień wszystkie miasta, stany i regiony w kraju

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

Wymień wszystkie placówki - takie jak restauracje, sklepy i biura w kraju

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

Więcej informacji i opcji dostępnych na

https://developers.google.com/maps/documentation/javascript/places-autocomplete

Mam nadzieję, że może to być przydatne dla kogoś

Kiran Muralee
źródło
9

Zasadniczo taka sama jak zaakceptowana odpowiedź, ale zaktualizowana o nowy typ i ograniczenia dla wielu krajów:

function initialize() {

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

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

Użycie '(regions)'zamiast '(cities)'pozwala wyszukiwać według kodu pocztowego oraz nazwy miasta.

Zobacz oficjalną dokumentację, Tabela 3: https://developers.google.com/places/supported_types

seBaka28
źródło
8

Przez jakiś czas bawiłem się interfejsem API Google Autouzupełniania i oto najlepsze rozwiązanie, jakie mogłem znaleźć, aby ograniczyć wyniki do tylko krajów:

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

Jeśli spojrzysz na obiekt wynikowy, który zostanie zwrócony, zobaczysz, że istnieje tablica address_components, która będzie zawierać kilka obiektów reprezentujących różne części adresu. W każdym z tych obiektów będzie zawierała tablicę „typów”, aw tej tablicy „typów” zobaczysz różne etykiety powiązane z adresem, w tym jeden dla kraju.

wmock
źródło
Czy istnieje sposób na ograniczenie się tylko do niektórych stanów w USA, a nawet wykluczenie określonych stanów?
Martin Erlic,
@ santafebound Próbuję zrobić to samo (dla określonego stanu w Australii). Z dokumentacji wynika, że ​​odpowiedź brzmi „Nie [jeszcze]”, ale mam nadzieję znaleźć sposób na przechwycenie responseobiektu i ograniczenie go innymi kluczami w danych.
GT.
4

Musisz także powiększyć mapę i wyśrodkować ją ze względu na ograniczenia obowiązujące w Twoim kraju!

Wystarczy użyć zoomu i środkowych parametrów! ;)

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

  ... all other code ...

}
Kir Mazur
źródło
4

Znalazłem rozwiązanie dla siebie

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

to rozwiązanie pokazuje tylko miasto i kraj ..

Cenk YAGMUR
źródło
Czy możesz podać pełną listę kodów z autouzupełnianiem
Volodymyr Khmil
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>

Aby uzyskać więcej informacji, odwiedź ten link

Hina Vaja
źródło