¿Cómo usar JavaScript para las funciones de geolocalización?
19/03/2024
•
5
min
Para usar JavaScript para funciones de geolocalización, tendrás que usar la API de Geolocalización, que está incorporada en los navegadores modernos.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Geolocalización de JavaScript</title>
</head>
<body>
<button onclick="getMyLocation()">Obtener mi ubicación</button>
<p id="location"></p>
<script src="javascript.js"></script>
</body>
</html>
Este es un botón simple que, al hacer clic, dispara la función getMyLocation y mostrará las coordenadas debajo del botón.
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
JavaScript:
Tu archivo javascript.js debería contener estos códigos.
function getMyLocation() {
// comprobar si la geolocalización está soportada/habilitada en el navegador actual
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
// obtener la latitud y longitud de las coordenadas de la posición
var lat = position.coords.latitude;
var long = position.coords.longitude;
document.getElementById('location').innerHTML = 'La latitud es ' + lat + '° La longitud es ' + long + '°';
},
// manejar los errores pasando una función de error
function (error) {
console.log("El localizador fue denegado. :(");
}
);
}
// la geolocalización no está soportada
// obtener tu ubicación de alguna otra manera
else {
console.log("La geolocalización no está habilitada en este navegador");
}
}
Eso es todo. Este código de JavaScript verifica si tu navegador soporta la API de Geolocalización. Si lo hace, se llama al método navigator.geolocation.getCurrentPosition(). Este método recupera la ubicación actual del usuario. Si se recupera con éxito la ubicación, se muestran la latitud y la longitud de la ubicación del usuario.
En primer lugar, asegúrate de que los servicios de geolocalización están disponibles comprobando el objeto navigator.geolocation.
El método navigator.geolocation.getCurrentPosition() se utiliza para obtener la ubicación geográfica actual del usuario. Este método tiene dos devoluciones de llamada: éxito y error, que se disparan dependiendo de si la recuperación de la geolocalización fue exitosa o no.
En el ejemplo de arriba, se pasa una función anónima como devolución de llamada exitosa, que toma un argumento position- un objeto que contiene información sobre la ubicación.
La función extrae la latitud y la longitud de este objeto, e inserta estos datos en el documento HTML.
La segunda función de devolución de llamada se utiliza para manejar cualquier error que ocurra durante la recuperación de la geolocalización.
Debes recordar que se requiere el permiso del usuario para obtener la ubicación y que solo funciona en el protocolo https (en http funciona solo en localhost para el desarrollo).
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.