Cách giới hạn kết quả tự động hoàn thành của Google chỉ ở Thành phố và Quốc gia

198

Tôi đang sử dụng google autocomplete đặt javascript để trả về kết quả được đề xuất cho hộp tìm kiếm của tôi, điều tôi cần là chỉ hiển thị thành phố và quốc gia liên quan đến các ký tự được nhập nhưng google api sẽ cung cấp rất nhiều kết quả vị trí chung mà tôi không cần, vậy làm thế nào để giới hạn kết quả chỉ hiển thị thành phố và quốc gia.

Tôi đang sử dụng ví dụ sau:

<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
nguồn

372

Bạn có thể thử giới hạn quốc gia

function initialize() {

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

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

Thêm thông tin:

ISO 3166-1 alpha-2 có thể được sử dụng để hạn chế kết quả cho các nhóm cụ thể. Hiện tại, bạn có thể sử dụng thành phầnRestrictions để lọc theo quốc gia.

Quốc gia phải được thông qua dưới dạng hai ký tự, mã quốc gia tương thích ISO 3166-1 Alpha-2.

Mã quốc gia được giao chính thức

— Pháp
nguồn

Bạn có biết nếu có bất kỳ giới hạn sử dụng nào đối với các truy vấn hoàn thành tự động nếu tôi không tải bất kỳ bản đồ nào không? Tôi biết có giới hạn sử dụng 25.000 nếu tôi tải bản đồ

— Mithil

4

Đó là tháng 8 năm 2014. Có thể chỉ hiển thị các quốc gia và thành phố không? Ví dụ: khi tôi gõ Mil, kết quả là Milan, Bergamo, Ý. Tôi chỉ cần Milan, Ý. Thêm tất cả các quốc gia từng cái một không phải là một lựa chọn.

— erdomester

2

Có thể chỉ định nhiều hơn một quốc gia?

— bart

2

@bart rõ ràng là không thể. Vui lòng đánh dấu sao vấn đề này nếu bạn muốn tính năng đó.

— dlsso

1

nếu chúng tôi sử dụng các loại: ['(thành phố)'] thì nó sẽ không cho phép chúng tôi tìm kiếm theo mã zip ở đây.

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

Mở rộng đoạn trích

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

tham chiếu đến các loại khác: http://code.google.com.vn/apis/maps/documentation/places/supported_types.html#table2

— UnLoCo
nguồn

1

kiểm tra mã này ngay từ google. họ đã tạo một ví dụ lọc code.google.com/apis/maps/documentation/javascript/,

— UnLoCo

đối tượng tự động hoàn thành sẽ không chấp nhận hai biến, chỉ một biến có thể được chấp nhận đó là 'mã địa lý'. Tôi không biết làm thế nào để giải quyết vấn đề này. Google liệt kê rất nhiều loại nhưng không loại nào có thể được chấp nhận.

— JohnTaa

các thông số tương tự sẽ làm việc cho AutocompleteService?

— Steven Aguilar

12

thử cái này

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

Mở rộng đoạn trích

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

Thay đổi điều này thành: "area = in" (in = ấn độ)

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

— Rùa
nguồn

Chúng tôi cần danh sách các thành phố, danh sách các tiểu bang, danh sách các khu vực, v.v.

— Shadab K

Đây phải là câu trả lời được chấp nhận. Cách đơn giản nhất và nhanh nhất để đạt được kết quả mà OP yêu cầu. và nó đã làm việc cho tôi.

— user2056633

9

Câu trả lời được đưa ra bởi Francois dẫn đến việc liệt kê tất cả các thành phố từ một quốc gia. Nhưng nếu yêu cầu là liệt kê tất cả các khu vực (thành phố + tiểu bang + khu vực khác, v.v.) trong một quốc gia hoặc các cơ sở trong quốc gia, bạn có thể lọc kết quả tương ứng bằng cách thay đổi loại.

Chỉ liệt kê các thành phố trong cả nước

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

Liệt kê tất cả các thành phố, tiểu bang và khu vực trong cả nước

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

Liệt kê tất cả các cơ sở - chẳng hạn như nhà hàng, cửa hàng và văn phòng trong nước

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

Thêm thông tin và các tùy chọn có sẵn tại

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

Hy vọng điều này có thể hữu ích cho ai đó

— Bức tranh tường Kiran
nguồn

9

Về cơ bản giống như câu trả lời được chấp nhận, nhưng được cập nhật với loại hạn chế mới và nhiều quốc gia:

function initialize() {

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

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

Sử dụng '(regions)'thay vì '(cities)'cho phép tìm kiếm theo mã bưu chính cũng như tên thành phố.

Xem tài liệu chính thức, Bảng 3: https://developers.google.com/places/supported_types

— seBaka28
nguồn

8

Tôi đã chơi xung quanh với Google Autocomplete API một chút và đây là giải pháp tốt nhất tôi có thể tìm thấy để giới hạn kết quả của bạn ở chỉ các quốc gia:

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

Nếu bạn nhìn vào đối tượng kết quả được trả về, bạn sẽ thấy rằng có một mảng address_components sẽ chứa một số đối tượng đại diện cho các phần khác nhau của một địa chỉ. Trong mỗi đối tượng này, nó sẽ chứa một mảng 'loại' và trong mảng 'loại' này, bạn sẽ thấy các nhãn khác nhau được liên kết với một địa chỉ, bao gồm một địa chỉ cho quốc gia.

— wmock
nguồn

Có cách nào để hạn chế chỉ một số tiểu bang ở Hoa Kỳ, hoặc thậm chí loại trừ các tiểu bang cụ thể không?

— Martin Erlic

@santafebound Tôi đang cố gắng làm điều tương tự (đối với một tiểu bang cụ thể ở Úc). Từ tài liệu có vẻ như câu trả lời là 'Chưa [chưa]', nhưng tôi hy vọng sẽ tìm ra cách chặn responseđối tượng và hạn chế nó bằng các khóa khác trong dữ liệu.

— GT.

4

Ngoài ra, bạn sẽ cần phóng to và căn giữa bản đồ do giới hạn quốc gia của bạn!

Chỉ cần sử dụng các thông số phóng to và trung tâm! ;)

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
nguồn

4

Tôi tìm thấy một giải pháp cho chính mình

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

Giải pháp này chỉ hiển thị thành phố và quốc gia ..

— Cenk YAGMUR
nguồn

Bạn có thể cung cấp danh sách mã đầy đủ với tự động hoàn thành

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

Để biết thêm thông tin truy cập liên kết này

— Hina Vaja
nguồn