Cara membatasi hasil Google autocomplete hanya untuk Kota dan Negara

198

Saya menggunakan javascript tempat autocomplete google untuk mengembalikan hasil yang disarankan untuk kotak pencarian saya, yang saya butuhkan adalah hanya menampilkan kota dan negara yang terkait dengan karakter yang dimasukkan tetapi google api akan memberikan banyak hasil tempat umum yang tidak saya butuhkan, jadi bagaimana caranya untuk membatasi hasil agar hanya menampilkan kota dan negara.

Saya menggunakan Contoh berikut:

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

Jawaban:

372

Anda dapat mencoba batasan negara

function initialize() {

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

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

Info lebih lanjut:

ISO 3166-1 alpha-2 dapat digunakan untuk membatasi hasil pada kelompok tertentu. Saat ini, Anda dapat menggunakan pembatasan Komponen untuk memfilter menurut negara.

Negara harus dinyatakan sebagai dua karakter, kode negara yang kompatibel dengan ISO 3166-1 Alpha-2.

Kode negara yang ditetapkan secara resmi

Francois
sumber
Apakah Anda tahu jika ada batasan penggunaan pada permintaan lengkapi otomatis jika saya tidak memuat peta? Saya tahu ada batas penggunaan 25.000 jika saya memuat peta
Mithil
4
Ini Agustus 2014. Apakah sudah mungkin hanya menampilkan negara dan kota? Misalnya, ketika saya mengetik Mil, hasilnya adalah Milan, Bergamo, Italia. Saya hanya perlu Milan, Italia. Menambahkan semua negara satu per satu bukanlah pilihan.
erdomester
2
Apakah mungkin menentukan lebih dari satu negara?
Bart
2
@ Bart rupanya itu tidak mungkin. Silakan beri bintang pada masalah ini jika Anda menginginkan fitur itu.
dlsso
1
jika kita menggunakan tipe: ['(kota)'] maka itu tidak akan memungkinkan kita untuk mencari dengan kode pos di sini.
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>
Luaskan cuplikan

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

referensi ke jenis lain: http://code.google.com/apis/maps/documentation/places/supported_types.html#table2

UnLoCo
sumber
1
periksa kode ini langsung dari google. mereka membuat contoh penyaringan code.google.com/apis/maps/documentation/javascript/...
UnLoCo
objek autocomplete tidak akan menerima dua variabel, hanya satu variabel yang dapat diterima yaitu 'geocode'. Saya tidak tahu bagaimana menyelesaikan masalah ini. Dokumentasi Google daftar banyak jenis tetapi tidak ada yang dapat diterima.
JohnTaa
akankah parameter yang sama berfungsi AutocompleteService?
Steven Aguilar
12

coba ini 

<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>
Luaskan cuplikan

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

Ubah ini menjadi: "region = in" (di = india)

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

Ravindra
sumber
Kami membutuhkan daftar kota, daftar negara bagian, daftar wilayah, dan sebagainya
Shadab K
Ini harus menjadi jawaban yang diterima. Cara termudah dan tercepat untuk mencapai hasil yang diminta OP. dan itu berhasil untuk saya.
user2056633
9

The jawaban yang diberikan oleh hasil Francois di daftar semua kota dari negara. Tetapi jika persyaratannya adalah untuk mencantumkan semua wilayah (kota + negara bagian + daerah lain dll) di suatu negara atau perusahaan di negara itu, Anda dapat memfilter hasil sesuai dengan mengubah jenis.

Daftar hanya kota di negara ini 

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

Daftar semua kota, negara bagian, dan wilayah di negara ini

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

Daftar semua perusahaan - seperti restoran, toko, dan kantor di negara ini

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

Informasi dan opsi lebih lanjut tersedia di

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

Semoga ini bermanfaat bagi seseorang

Kiran Muralee
sumber
9

Pada dasarnya sama dengan jawaban yang diterima, tetapi diperbarui dengan tipe baru dan beberapa batasan negara:

function initialize() {

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

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

Menggunakan '(regions)'alih-alih '(cities)'memungkinkan untuk mencari berdasarkan kode pos serta nama kota.

Lihat dokumentasi resmi, Tabel 3: https://developers.google.com/places/supported_types

seBaka28
sumber
8

Saya telah bermain-main dengan Google Autocomplete API sebentar dan inilah solusi terbaik yang bisa saya temukan untuk membatasi hasil Anda hanya di negara:

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

Jika Anda melihat objek hasil yang dikembalikan, Anda akan melihat bahwa ada array address_components yang akan berisi beberapa objek yang mewakili berbagai bagian dari alamat. Di dalam masing-masing objek ini, itu akan berisi array 'types' dan dalam array 'types' ini, Anda akan melihat label berbeda yang terkait dengan alamat, termasuk satu untuk negara.

wmock
sumber
Apakah ada cara untuk membatasi hanya negara bagian tertentu di AS, atau bahkan mengecualikan negara bagian tertentu?
Martin Erlic
@santafebound Saya mencoba melakukan hal yang sama (untuk negara bagian tertentu di Australia). Dari dokumentasi itu sepertinya jawabannya adalah 'Tidak [belum]', tapi saya berharap menemukan cara untuk mencegat responseobjek dan membatasi dengan kunci lain dalam data.
GT.
4

Anda juga perlu memperbesar dan memusatkan peta karena batasan negara Anda!

Cukup gunakan parameter zoom dan pusat! ;)

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
sumber
4

Saya menemukan solusi untuk diri saya sendiri

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

solusi ini hanya menampilkan kota dan negara ..

Cenk YAGMUR
sumber
Bisakah Anda memberikan daftar kode lengkap dengan autocomplete
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>

Untuk informasi lebih lanjut, kunjungi tautan ini

Hina Vaja
sumber