En este artículo, conoceremos el Método getCurrentPosition() de Geolocalización HTML , varios parámetros y su implementación a través de los ejemplos. 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.
El método getCurrentPosition() se utiliza para obtener la ubicación actual del usuario.
Sintaxis:
navigator.geolocation.getCurrentPosition(success, error, options);
Valores paramétricos:
- éxito: es una función que se llama después de que los datos se recopilan correctamente mediante el método getCurrentPosition() de la API.
- 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 maximumAge.
Consulte el artículo HTML Geolocalización para conocer en detalle las diversas propiedades, métodos y su implementación.
Ejemplo: El siguiente ejemplo ilustra el Método getCurrentPosition() de Geolocalización al verificar la geolocalización del usuario.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Get Current Position</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<div>
<button onclick="geolocator()">click me</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:
Obtener la geolocalización actual del usuario.
Ejemplo 2: para mostrar la marca de tiempo y la precisión.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Get Current Location</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<div>
<button onclick="geolocator()">click me</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:
Obtener la marca de tiempo y la precisión de un usuario
Navegadores compatibles:
- Google Chrome 5.0
- Microsoft Edge 12.0
- Internet Explorer 9.0
- Firefox 3.5
- Ópera 10.6
- Safari 5.0
Publicación traducida automáticamente
Artículo escrito por abhisheksainiaggarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA