Chcę przedstawić moim użytkownikom pole tekstowe, w którym mogą wpisać swój adres. Podczas wpisywania adresu chcę przekazać użytkownikom sugestie/podpowiedzi dotyczące adresu, który próbują wpisać. Obawiam się także znaczenia tego adresu (np. Że adres nie jest adresem w połowie drogi na całym świecie).Adres autouzupełniania + Google Maps API
Czy to możliwe? Używam jQuery.
Możesz użyć Google Places API, aby uzyskać autouzupełnianie adresu. Po wybraniu adresu pole address_components zawiera dane adresu strukturalnego (np. Ulica, miasto, kraj) i może być łatwo przekształcone w oddzielne pola.
Oto krótki pokaz pracy:
<!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>
Czy istnieje sposób automatycznego wypełnienia różnych danych wejściowych? Więc jeśli zaczynasz od wpisania pierwszego wiersza i dajesz opcję adresu, po kliknięciu na niego automatycznie wypełnia on adres na wielu wejściach? –
Jak mogę pokazać wybraną lokalizację na mapie? Pomóż mi – Erum
Wow, to było niewiarygodnie łatwe i proste, dzięki człowieku! – Brian
Spójrz na address-suggestion i the demo. Jest zaimplementowany z interfejsem API geocode jQuery i Google Maps.
https://github.com/ubilabs/geocomplete powinien działać dla Ciebie. Będziesz także mógł pokazać mapę, jeśli to konieczne.
Jeśli korzystasz z wtyczki bez wyświetlania mapy, w polu tekstowym musisz wyświetlić logo "powered by Google".
Uruchomiona wersja odpowiedzi @Maksym Kozlenko Dla tych, jak chcą zobaczyć to w akcji.
<!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>Musisz użyć klucza API.
zobacz referencje 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>
Prawdopodobnie nie jest to pytanie jQuery. Potrzebujesz typu u innych dostawców, którzy podadzą ci adresy w czasie wykonywania, takie jak usługi QAS. – kobe
Nie wiem, czy są wolni dostawcy, wdrożyliśmy w naszej firmie i używaliśmy QAS. – kobe
http://www.qas.com/home.htm, sprawdź, czy to właśnie próbujesz wdrożyć. – kobe