Tengo un cuadro de texto en mi página que obtiene un nombre de ubicación y un botón con el texto getLat&Long
. Ahora al hacer clic en mi botón, tengo que mostrar una alerta de latitude
y longitude
de la ubicación en el cuadro de texto. ¿Cualquier sugerencia?Obtener latitud y longitud según el nombre de la ubicación con Google Autocompletar API
Respuesta
Puede usar el Google Geocoder service en el Google Maps API para convertir desde el nombre de su ubicación a una latitud y longitud. Así que hay algo de código como:
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("address").value;
geocoder.geocode({ 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
// do something with the geocoded result
//
// results[0].geometry.location.latitude
// results[0].geometry.location.longitude
}
});
actualización
¿Está incluyendo el API de JavaScript v3?
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
Error-'google.maps.Geocoder(); 'no es un constructor. – Chandra
¿Cómo puedo usarlo para fuente y destino, me refiero a dos campos? – Wearybands
¿cuál es la diferencia del sensor verdadero o falso? – Serge
http://maps.googleapis.com/maps/api/geocode/OUTPUT?address=YOUR_LOCATION&sensor=true
OUTPUT = JSON o XML;
para obtener información detallada sobre Google Map API pasan por url:
http://code.google.com/apis/maps/documentation/geocoding/index.html
la esperanza que esto ayudará
¡Esto es asombroso! Solo una pregunta, ¿esto requiere una clave API? – Supertecnoboff
La continuación es el código que he usado. Está funcionando perfectamente.
var geo = new google.maps.Geocoder;
geo.geocode({'address':address},function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
var myLatLng = results[0].geometry.location;
// Add some code to work with myLatLng
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
Espero que esto ayude.
Sugeriría el siguiente código, puede usar este <script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
para obtener la latitud y la longitud de una ubicación, aunque puede no ser tan precisa, sin embargo, funcionó para mí;
fragmento de código a continuación
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript's Geolocation API</title>
<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
var lat = geoip_latitude();
var long = geoip_longitude();
document.write("Latitude: "+lat+"</br>Longitude: "+long);
</script>
</body>
</html>
espero que esto puede ayudar a alguien en el futuro.
Puede utilizar el Google Geocoding API, como se dijo antes, que tenía que hacer algún trabajo con esto recientemente, espero que esto ayuda a:
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
function initialize() {
var address = (document.getElementById('my-address'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
});
}
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById("my-address").value;
geocoder.geocode({ 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert("Latitude: "+results[0].geometry.location.lat());
alert("Longitude: "+results[0].geometry.location.lng());
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input type="text" id="my-address">
<button id="getCords" onClick="codeAddress();">getLat&Long</button>
</body>
</html>
Ahora bien, esto ha también una función autocomlpete que se puede ver en el código , obtiene la dirección de la entrada y se completa automáticamente por la API al escribir.
Una vez que tenga su dirección, presione el botón y obtendrá los resultados mediante alerta según sea necesario. Tenga en cuenta también que utiliza la API más reciente y carga la biblioteca de "lugares" (cuando llama a la API utiliza el parámetro "bibliotecas").
Espero que esto ayude, y lea la documentación para obtener más información, saludos.
Edición # 1: Fiddle
sí, ¡gracias! el lat() lng() es perfecto porque parece cambiar de solicitud a solicitud aleatoriamente con propiedades reales como "k" y "A" u otras más raras como la de lat lng. Estás coool. –
muy útil. Has hecho un trabajo increíble. Gracias – Randhir
¿Requiere esto una clave de API? – Supertecnoboff
espero que esto será más útil para el futuro ámbito contiene completa función API de Google automático con latitud y longitud
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
Ver completo
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete With Latitude & Longitude </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
function initialize() {
var address = (document.getElementById('pac-input'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
/*********************************************************************/
/* var address contain your autocomplete address *********************/
/* place.geometry.location.lat() && place.geometry.location.lat() ****/
/* will be used for current address latitude and longitude************/
/*********************************************************************/
document.getElementById('lat').innerHTML = place.geometry.location.lat();
document.getElementById('long').innerHTML = place.geometry.location.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="lat"></div>
<div id="long"></div>
</body>
</html>
Ente r la ubicación por Autocompletar y el resto de todos los campos: los valores de latitud y longitud larga se llenan automáticamente.
Reemplazar API KEY con su API de Google clave
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
</head>
<body>
<textarea placeholder="Enter Area name to populate Latitude and Longitude" name="address" onFocus="initializeAutocomplete()" id="locality" ></textarea><br>
<input type="text" name="city" id="city" placeholder="City" value="" ><br>
<input type="text" name="latitude" id="latitude" placeholder="Latitude" value="" ><br>
<input type="text" name="longitude" id="longitude" placeholder="Longitude" value="" ><br>
<input type="text" name="place_id" id="location_id" placeholder="Location Ids" value="" ><br>
<script type="text/javascript">
function initializeAutocomplete(){
var input = document.getElementById('locality');
// var options = {
// types: ['(regions)'],
// componentRestrictions: {country: "IN"}
// };
var options = {}
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
var placeId = place.place_id;
// to set city name, using the locality param
var componentForm = {
locality: 'short_name',
};
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById("city").value = val;
}
}
document.getElementById("latitude").value = lat;
document.getElementById("longitude").value = lng;
document.getElementById("location_id").value = placeId;
});
}
</script>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?libraries=places&key=API KEY"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500></script>
- 1. Latitud y longitud según el código postal
- 2. Obtener la ubicación del usuario (latitud, longitud) con Bing o Google Maps API
- 3. Obtener latitud y longitud desde la dirección sin el uso de la API de Google
- 4. google maps Obtener latitud y longitud desde el código postal
- 5. ¿Los mapas de Google obtienen latitud y longitud con el nombre de la ciudad?
- 6. ¿Cómo puedo obtener la latitud, longitud de una ubicación mediante programación o mediante una API
- 7. Error en latitud y longitud - Google Maps API JS 3.0
- 8. ¿Cómo puedo configurar mi latitud y longitud para depurar la API de geolocalización con Google Chrome?
- 9. Obtener el país de latitud longitud
- 10. API de geolocalización de Google: ¿utiliza la longitud y la latitud para obtener la dirección en el cuadro de texto?
- 11. ¿Cómo obtener ubicación (latitud y longitud) en variable en iOS?
- 12. Cadena a CL Ubicación latitud y longitud
- 13. Encuentra ubicación más cercana con la longitud y latitud
- 14. Mostrar ubicación Usar coordenadas de longitud/latitud - Google Maps
- 15. Obtener código postal de latitud y longitud?
- 16. Google maps - obtener el nombre del país, la región y la ciudad de longitud y latitud (PHP)
- 17. Ciudad por GPS Ubicación Latitud/Longitud
- 18. Mapas de Google HTML5 clic para obtener latitud, longitud
- 19. ¿Cómo obtener la longitud y la latitud de la ubicación actual en iOS 4.0/4.2?
- 20. cómo obtener la latitud, longitud onclick de un mapa en google maps api v3 javascript?
- 21. cómo obtener la ubicación actual en latitud y longitud en el objetivo c
- 22. Obtener latitud y longitud de marcador (onclick)
- 23. Obtener el nombre de la zona horaria de PHP de latitud y longitud?
- 24. Obtener la latitud/longitud de la ubicación actual de un amigo usando Graph FQL
- 25. obtener la zona horaria utilizando latitud y longitud?
- 26. iphone google maps - dirección usando latitud y longitud
- 27. ¿Cómo obtener la longitud y la latitud de cualquier dirección?
- 28. Obtener latitud/longitud desde la dirección
- 29. ¿La latitud y la longitud pueden encontrar el código postal?
- 30. Longitud y latitud desde la dirección IP
http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+ CA & sensor = cierto más información aquí https://developers.google.com/maps/documentation/geocoding/ – zzart