En este artículo, discutiremos el método de Geolocalización watchPosition(). La geolocalización en HTML se utiliza para registrar una función de controlador que se llamará automáticamente cada vez que cambie la posición del dispositivo.
Sintaxis:
navigator.geolocation.watchPosition(showLoc, error, options);
Parámetro:
- showLoc: también es una función para el mensaje de éxito que mostrará la latitud, la longitud, la marca de tiempo, etc.
- error: Devolverá los mensajes de error y advertencias del puesto si aplica
- opciones: se utiliza para configurar enableHighAccuracy, timeout y maximumAge
Donde el mensaje de éxito de showLoc incluye lo siguiente:
- latitud: esta propiedad devolverá la latitud de la ubicación dada
- longitud: esta propiedad devolverá la longitud de la ubicación dada
- marca de tiempo: esta propiedad devolverá la marca de tiempo de la ubicación dada
- velocidad: esta propiedad devolverá la velocidad de la ubicación dada
- altitud: esta propiedad devolverá la altitud sobre el nivel del mar de la ubicación dada
- precisión: esta propiedad devolverá la precisión sobre el nivel del mar de la ubicación dada
Ejemplo: este ejemplo muestra la latitud y la longitud del método watchPosition().
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1" />
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<p><b> Displaying Latitude and Longitude</b></p>
<button onclick="getlocation()">Click Me</button>
<p id="paraID"></p>
<p id="paraID1"></p>
<script>
var variable1 = document.getElementById("paraID");
var variable2 = document.getElementById("paraID1");
// This function will get your current location
function getlocation() {
navigator.geolocation.watchPosition(showLoc);
}
// This function will show your current location
function showLoc(pos) {
variable1.innerHTML = "Latitude: " +
pos.coords.latitude;
variable2.innerHTML = "Longitude: " +
pos.coords.longitude;
}
</script>
</body>
</html>
Producción:
Ejemplo 2: Mostrar marca de tiempo
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1" />
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<p><b> Displaying Timestamp</b></p>
<button onclick="getlocation()">Click Me</button>
<p id="paraID"></p>
<script>
var variable1 = document.getElementById("paraID");
// This function will get your current location
function getlocation() {
navigator.geolocation.watchPosition(showLoc);
}
// This function will show your current location
function showLoc(pos) {
variable1.innerHTML = "Timestamp: " +
pos.timestamp;
}
</script>
</body>
</html>
Producción:
Ejemplo 3: Velocidad de visualización
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1" />
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<p><b> Displaying Timestamp</b></p>
<button onclick="getlocation()">Click Me</button>
<p id="paraID"></p>
<script>
var variable1 = document.getElementById("paraID");
// This function will get your current location
function getlocation() {
navigator.geolocation.watchPosition(showLoc);
}
// This function will show your current location
function showLoc(pos) {
variable1.innerHTML = "Timestamp: " +
pos.timestamp;
}
</script>
</body>
</html>
Producción:
Ejemplo 4: Mostrar altitud
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1" />
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<p><b> Displaying Altitude</b></p>
<button onclick="getlocation()">Click Me</button>
<p id="paraID"></p>
<script>
var variable1 = document.getElementById("paraID");
// This function will get your current location
function getlocation() {
navigator.geolocation.watchPosition(showLoc);
}
// This function will show your current location
function showLoc(pos) {
variable1.innerHTML = "Altitude: " +
pos.coords.altitude;
}
</script>
</body>
</html>
Producción:
Ejemplo 5: Precisión de visualización
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<p><b> Displaying Accuracy</b></p>
<button onclick="getlocation()">Click Me</button>
<p id="paraID"></p>
<script>
var variable1 = document.getElementById("paraID");
// This function will get your current location
function getlocation() {
navigator.geolocation.watchPosition(showLoc);
}
// This function will show your current location
function showLoc(pos) {
variable1.innerHTML = "Accuracy: " +
pos.coords.accuracy;
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ojaswilavu8128 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA