¿Quieres aprender a como obtener ubicación JavaScript? Muchos de los sitios web de hoy muestran una base de contenido dinámico en la ubicación del usuario para proporcionar información relevante, anuncios o lugares locales. En este artículo, le mostraremos cómo detectar ubicación de usuario con javascript mediante la API de geolocalización. Una forma pura de JavaScript sin ningún servicio de terceros para recuperar la ubicación precisa del usuario.
Detectar Ubicación de Usuario con Javascript
API de geolocalización
¿Se puede obtener geolocalización JavaScript? La API de geolocalización permite que JavaScript o contenido web accedan a la ubicación del usuario o la ubicación del dispositivo. Si observa la notificación emergente en un sitio web que le solicita un permiso para acceder a su ubicación, esa es la API de geolocalización. Dado que la divulgación de su ubicación puede comprometer su privacidad, los navegadores web necesitarán su consentimiento antes de permitir el acceso.
Usar la geolocalización es muy fácil. Puede acceder a la posición del usuario utilizando getCurrentPosition y usar la función de devolución de llamada para procesar el objeto de posición devuelto.
navigator.geolocation.getCurrentPosition(callbackfunction)
Sin embargo, algunos navegadores no admiten la geolocalización, por lo que debe verificarlo primero.
if (navigator.geolocation) { //check if geolocation is available
navigator.geolocation.getCurrentPosition(function(position){
console.log(position);
});
}
El objeto de posición devuelta debería verse así.
Así que accede a la latitud y longitud del usuario a través de position.coords.latitude y position.coords.longitude
Combinado con Google Maps
¿Podemos obtener latitud y longitud javascript? Obtener latitud y longitud no es muy útil. Por lo tanto, necesita invertir la geocodificación para obtener la ciudad, el país, etc. A continuación, se muestra el ejemplo de cómo utilizar la geocodificación inversa de Google Maps para obtener la dirección de la ubicación especificada.
$.get( "http://maps.googleapis.com/maps/api/geocode/json?latlng="+ position.coords.latitude + "," + position.coords.longitude +"&sensor=false", function(data) {
console.log(data);
})
A continuación se muestra el JSON devuelto de las direcciones
O puede mostrar el mapa de esa coordenada utilizando la API de Google Maps de esta manera.
var img = new Image();
img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + position.coords.latitude + "," + position.coords.longitude + "&zoom=13&size=800x400&sensor=false";
$('#output').html(img);
¡Espero que esto ayude! Siéntase libre de dejar un comentario si tiene alguna pregunta.
Código fuente completo
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="navbar"><span>Red Stapler - Geolocation API</span></div>
<div id="wrapper">
<button id="location-button">Get User Location</button>
<div id="output"></div>
</div>
<script>
$('#location-button').click(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
console.log(position);
$.get( "http://maps.googleapis.com/maps/api/geocode/json?latlng="+ position.coords.latitude + "," + position.coords.longitude +"&sensor=false", function(data) {
console.log(data);
})
var img = new Image();
img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + position.coords.latitude + "," + position.coords.longitude + "&zoom=13&size=800x400&sensor=false";
$('#output').html(img);
});
}
});
</script>
</body>
</html>
Ahora que ya aprendiste a cómo obtener ubicación actual JavaScript, también te invitamos a que continúes ampliando tus conocimientos en nuestro sitio web.
Sigue aprendiendo con nosotros:
| Inventario php |
| Wamp o xampp |
| Detectar si es móvil o pc JavaScript |
| Gif de cargando |