Tôi muốn giới thiệu cho người dùng của mình một hộp văn bản trong đó họ có thể nhập địa chỉ của họ. Khi họ nhập địa chỉ của họ, tôi muốn cung cấp cho người dùng các đề xuất/dự đoán về địa chỉ họ đang cố nhập. Tôi cũng quan ngại về mức độ liên quan của địa chỉ này (ví dụ: địa chỉ không phải là địa chỉ nửa chừng trên toàn thế giới).Địa chỉ tự động điền + API Google Maps
Điều này có khả thi không? Tôi đang sử dụng jQuery.
Bạn có thể sử dụng API Google Địa điểm để có tự động điền cho địa chỉ. Khi địa chỉ được chọn, trường address_components chứa dữ liệu địa chỉ có cấu trúc (ví dụ: đường phố, thành phố, quốc gia) và có thể dễ dàng được chuyển đổi thành các trường riêng biệt.
Đây là một bản demo làm việc ngắn:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="address" style="width: 500px;"></input>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
</body>
</html>
có cách nào để tự động điền một đầu vào khác? Vì vậy, nếu bạn bắt đầu bằng cách nhập dòng đầu tiên và nó cung cấp cho bạn tùy chọn địa chỉ, khi bạn nhấp vào nó, nó sẽ tự động điền địa chỉ trên một số đầu vào? –
làm thế nào tôi có thể hiển thị vị trí được lựa chọn trên bản đồ xin vui lòng giúp tôi – Erum
Wow, đó là vô cùng dễ dàng và đơn giản, cảm ơn người đàn ông! – Brian
Hãy xem address-suggestion, và the demo. Nó được triển khai với API mã hóa địa lý của jQuery và Google Maps.
https://github.com/ubilabs/geocomplete sẽ phù hợp với bạn. Bạn cũng sẽ có thể hiển thị bản đồ nếu cần.
Nếu bạn sử dụng plugin mà không hiển thị bản đồ, bạn phải hiển thị biểu trưng "được hỗ trợ bởi Google" trong trường văn bản.
Phiên bản đang chạy của @Maksym Kozlenko answer Đối với những người muốn xem điều này trong thực tế.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="address" style="width: 500px;"></input>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
</body>
</html>Bạn phải sử dụng khóa API.
Xem tham khảo here.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="address" style="width: 500px;"></input>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIWSqJ5-3D-UviE0ZLO4U6AjhVcn58y4g&libraries=places&callback=initMap"></script>
<script>
function initMap(){
var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
}
</script>
</body>
</html>
Đây không phải là lẽ câu hỏi jquery. Bạn cần nhập một số nhà cung cấp bên thứ ba cung cấp cho bạn địa chỉ trong thời gian chạy như dịch vụ QAS. – kobe
Tôi không biết nếu có bất kỳ nhà cung cấp miễn phí nào, chúng tôi đã triển khai trong công ty của chúng tôi và đã sử dụng QAS. – kobe
http://www.qas.com/home.htm, kiểm tra xem đây có phải là những gì bạn đang cố triển khai hay không. – kobe