En este artículo, discutiremos el método para obtener la ubicación actual del usuario en un documento HTML. Usaremos la propiedad de geolocalización de Navigator que nos ayudará a conseguirlo. La propiedad de geolocalización del navegador se utiliza para devolver un objeto de geolocalización por parte del navegador que se puede utilizar para localizar la posición del usuario en el documento HTML. Es una propiedad de solo lectura y solo está disponible con la aprobación del usuario, ya que puede comprometer la privacidad del usuario.
Sintaxis:
navigator.geolocation
Para obtener la ubicación actual del usuario, vamos a utilizar el método getCurrentPosition() que está disponible en la propiedad de geolocalización de Navigator. El método getCurrentPosition() se usa para obtener la ubicación actual del usuario.
Sintaxis:
navigator.geolocation.getCurrentPosition(success, error, options);
Valores paramétricos:
- éxito: esta es una función que se llama después de que el método getCurrentPosition() recopila correctamente los datos.
- error: Esta es una función que se ejecuta cuando ocurre alguna advertencia o error.
- opciones: este es un objeto que nos ayuda a establecer un tiempo de espera opcional , enableHighAccuracy o las propiedades de edad máxima .
Consulte el artículo HTML Geolocalización para conocer en detalle las diversas propiedades, métodos y su implementación.
Ejemplo 1: El siguiente ejemplo ilustra cómo obtener la ubicación actual del usuario mediante el método geolocalización getCurrentPosition() .
HTML
<!DOCTYPE html>
<html>
<head>
<script>
// Success function
function successFunction(value) {
var lat = value.coords.latitude;
var long = value.coords.longitude;
document.getElementById('error')
.innerHTML = "";
document.getElementById('latitude')
.innerHTML = `Latitude: ${lat}`;
document.getElementById('longitude')
.innerHTML = `Latitude: ${long}`;
}
// Error Function
function errorFunction(err) {
document.getElementById('latitude')
.innerHTML = "";
document.getElementById('longitude')
.innerHTML = "";
document.getElementById('error')
.innerHTML = `Error occurred: ${err.message}`;
}
// Main function to get location
function getLocation() {
navigator.geolocation
.getCurrentPosition(
successFunction, errorFunction
);
}
</script>
</head>
<body>
<center>
<h1 style="color : green">
GeeksforGeeks
</h1>
<div>
<button onclick="getLocation()">
Get Location
</button>
<h2 id="latitude"></h2>
<h2 id="longitude"></h2>
<h2 id="error"></h2>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra cómo funciona el parámetro de tiempo de espera en el método geolocalización getCurrentPosition().
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#timeout {
width: 300px;
height: 30px;
margin: 10px;
font-size: 20px;
}
</style>
<script>
// Success function
function successFunction(value) {
var lat = value.coords.latitude;
var long = value.coords.longitude;
document.getElementById('error')
.innerHTML = "";
document.getElementById('latitude')
.innerHTML = `Latitude: ${lat}`;
document.getElementById('longitude')
.innerHTML = `Latitude: ${long}`;
}
// Error Function
function errorFunction(err) {
document.getElementById('latitude')
.innerHTML = "";
document.getElementById('longitude')
.innerHTML = "";
document.getElementById('error')
.innerHTML = `Error occurred: ${err.message}`;
}
// Main function to get location
function getLocation() {
const timeOut = document
.getElementById('timeout').value;
const options = {
timeout: timeOut == "" ? 5000 : timeOut
}
navigator
.geolocation
.getCurrentPosition(
successFunction, errorFunction, options
);
}
</script>
</head>
<body>
<center>
<h1 style="color : green">GeeksforGeeks</h1>
<div>
<input id="timeout" type="number"
placeholder="Enter the timeout in milliseconds">
<br />
<button onclick="getLocation()">
Get Location
</button>
<h2 id="latitude"></h2>
<h2 id="longitude"></h2>
<h2 id="error"></h2>
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamabhishekkalra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA