Quiero presentar a mis usuarios un cuadro de texto en el que puedan escribir su dirección. A medida que escriben su dirección, quiero proporcionar a los usuarios sugerencias/predicciones sobre la dirección que intentan escribir. También me preocupa la relevancia de esta dirección (por ejemplo, que la dirección no es una dirección que se encuentra en la mitad del mundo).Dirección de autocompletar + Google Maps API
¿Esto es posible? Estoy usando jQuery.
Puede utilizar la API de Google Places para tener un autocompletar para la dirección. Cuando se selecciona la dirección, el campo address_components contiene datos de dirección estructurados (por ejemplo, calle, ciudad, país) y podría convertirse fácilmente en campos separados.
Aquí es una demostración de trabajo corta:
<!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>
¿hay alguna forma de que llene automáticamente una entrada diferente? Entonces, si comienzas por ingresar la primera línea y te da la opción de la dirección, cuando haces clic en ella, llena automáticamente la dirección a través de varias entradas. –
cómo puedo mostrar la ubicación seleccionada en el mapa por favor ayúdenme – Erum
¡Guau, eso fue increíblemente fácil y directo, gracias hombre! – Brian
Tome un vistazo a address-suggestion y the demo. Está implementado con jQuery y Google Maps API de geocodificación.
https://github.com/ubilabs/geocomplete debería funcionar para usted. También podrá mostrar un mapa, si es necesario.
Si usa el complemento sin mostrar un mapa, debe mostrar el logotipo "powered by Google" en el campo de texto.
Versión en ejecución de @Maksym Kozlenko respuesta Para aquellos que quieren ver esto en acció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>usted tiene que utilizar una clave de API.
, ver datos de 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>
Esto probablemente no es cuestión de jQuery. Debe escribir con proveedores externos que le proporcionen su dirección en tiempo de ejecución, como los servicios QAS. – kobe
no sé si hay proveedores gratuitos, implementamos en nuestra compañía y usamos QAS. – kobe
http://www.qas.com/home.htm, compruebe si esto es lo que intenta implementar. – kobe