En este artículo, discutiremos cómo ubicar la posición del usuario en HTML.
Enfoque: El método getCurrentPosition() se utiliza para localizar la ubicación actual del usuario. HTML5 nos proporciona la API de geolocalización que nos ayuda a identificar la ubicación geográfica del usuario. La API de geolocalización proporciona la latitud y la longitud de la ubicación actual del usuario, que luego se envían al backend mediante JavaScript y luego se muestra la ubicación actual del usuario en el sitio web.
Sintaxis:
navigator.geolocation.getCurrentPosition(success, error, options);
Parámetros: Tiene tres parámetros como se mencionó anteriormente y se describe a continuación:
- éxito : es una función que se llama después de que el método getCurrentPosition() de la API recopila correctamente los datos.
- error : también es una función de devolución de llamada que devuelve las advertencias y los mensajes de error de la ubicación.
- options : Nos ayuda a establecer un tiempo de espera, enableHighAccuracy y la edad máxima.
Ejemplo : El siguiente ejemplo ilustra el Método getCurrentPosition() de Geolocalización al verificar la geolocalización del usuario.
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green">Welcome To GFG</h1>
<h3>How to locate the user's position in HTML?</h3>
<div>
<button onclick="geolocator()">
Click to get location
</button>
<p id="paraGraph"></p>
</div>
<script>
var paraGraph = document.getElementById("paraGraph");
var user_loc = navigator.geolocation;
function geolocator() {
if(user_loc) {
user_loc.getCurrentPosition(success);
} else {
"Your browser doesn't support geolocation API";
}
}
function success(data) {
var lat = data.coords.latitude;
var long = data.coords.longitude;
paraGraph.innerHTML = "Latitude: "
+ lat
+ "<br>Longitude: "
+ long;
}
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green">Welcome To GFG</h1>
<div>
<button onclick="geolocator()">
Click to get accuracy and timestamp
</button>
<p id="paraGraph"></p>
</div>
<script>
var paraGraph = document.getElementById("paraGraph");
var user_loc = navigator.geolocation;
function geolocator() {
if (user_loc) {
user_loc.getCurrentPosition(success);
} else {
"Your browser doesn't support geolocation API";
}
}
function success(data) {
var accu = data.coords.accuracy;
var tmstmp = data.timestamp;
paraGraph.innerHTML = "Accuracy: "
+ accu
+ "<br>Time Stamp: "
+ tmstmp;
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por bhanusivanagulug y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA