Ich möchte meinen Benutzern ein Textfeld zeigen, in das sie ihre Adresse eingeben können. Während sie ihre Adresse eingeben, möchte ich den Benutzern Vorschläge/Vorhersagen der Adresse geben, die sie eingeben möchten. Ich bin auch besorgt über die Relevanz dieser Adresse (z. B. dass die Adresse keine Adresse auf der anderen Seite der Welt ist).AutoFill-Adresse + Google Maps API
Ist das möglich? Ich benutze jQuery.
Sie können die Google Places-API verwenden, um eine automatische Vervollständigung für die Adresse zu erhalten. Wenn die Adresse ausgewählt ist, enthält das Feld address_components strukturierte Adressdaten (z. B. Straße, Stadt, Land) und könnte leicht in separate Felder umgewandelt werden.
Hier ist eine kurze Arbeits Demo:
<!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>
gibt es eine Möglichkeit, um automatisch einen anderen Eingang zu füllen? Also, wenn Sie beginnen, indem Sie die erste Zeile eingeben und es gibt Ihnen die Möglichkeit, die Adresse, wenn Sie darauf klicken, dass es automatisch die Adresse über eine Reihe von Eingaben füllt? –
Wie kann ich ausgewählten Standort auf der Karte zeigen, bitte helfen Sie mir – Erum
Wow, das war unglaublich einfach und unkompliziert, danke Mann! – Brian
Werfen Sie einen Blick auf address-suggestion und the demo. Es ist mit jQuery und Google Maps Geocode-API implementiert.
https://github.com/ubilabs/geocomplete sollte für Sie arbeiten. Sie können bei Bedarf auch eine Karte anzeigen.
Wenn Sie das Plugin verwenden, ohne eine Karte anzuzeigen, müssen Sie das Logo "powered by Google" unter dem Textfeld anzeigen.
Laufende Version von @Maksym Kozlenko Antwort Für diejenigen, die dies in Aktion sehen wollen.
<!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>Sie haben einen API-Schlüssel zu verwenden.
Siehe Referenz 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>
Dies ist nicht wahrscheinlich jquery Frage. Sie müssen mit einigen Drittanbietern eingeben, die Ihnen zur Laufzeit die Adresse wie QAS-Dienste zur Verfügung stellen. – kobe
Ich weiß nicht, ob es freie Anbieter gibt, wir haben es in unserer Firma implementiert und QAS benutzt. – kobe
http://www.qas.com/home.htm, überprüfen Sie, ob dies das ist, was Sie implementieren möchten. – kobe