En este artículo, conoceremos la geolocalización de HTML , varias propiedades, métodos y su implementación a través de los ejemplos.
La ubicación geográfica en HTML5 se usa para compartir la ubicación con algunos sitios web y conocer la ubicación exacta. Se utiliza principalmente para negocios locales, restaurantes o para mostrar ubicaciones en el mapa. Utiliza JavaScript para dar latitud y longitud al servidor backend. La mayoría de los navegadores admiten la API de geolocalización. La API de ubicación geográfica utiliza un objeto de navegador global que se puede crear de la siguiente manera:
Sintaxis:
var loc = navigator.geolocation
Propiedades de ubicación: la siguiente tabla determina las propiedades utilizadas en getCurrentPosition() y sus valores de retorno.
- coords.latitude: siempre devuelve la latitud como un número decimal.
- coords.accuracy: Siempre devuelve la precisión de la posición.
- coords.longitude : siempre devuelve la longitud como un número decimal.
- coords.altitude: Devuelve la altitud en metros sobre el nivel del mar si está disponible.
- coords.altitudeAccuracy: Devuelve la precisión de altitud de la posición, si está disponible.
- coords.heading: devuelve el rumbo en grados en el sentido de las agujas del reloj desde el norte, si está disponible
- coords.speed: Devuelve la velocidad en mps, si está disponible.
- marca de tiempo: Devuelve la fecha o la hora de la respuesta, si está disponible
Métodos de geolocalización: la geolocalización tiene los siguientes métodos que la hacen interesante y más fácil de trabajar.
- getCurrentPosition(): Obtiene la ubicación actual del usuario.
- watchPosition(): Obtiene actualizaciones periódicas de la ubicación actual del usuario.
- clearWatch(): Cancela una llamada a watchPosition actualmente en ejecución.
Ejemplo: este ejemplo explica cómo devolver la ubicación actual del usuario mediante el método getCurrentPosition().
HTML
var loc = navigator.geolocation;
function getLoc() {
loc.getCurrentPosition(showLoc, errHand);
}
La función anterior también se puede escribir sin crear un objeto navegador como se muestra a continuación:
HTML
function getlocation(){
navigator.geolocation.getCurrentPosition(showLoc, errHand);
}
Ejemplo: En este ejemplo, simplemente mostramos la ubicación actual con la ayuda de la latitud y la longitud a través de Geolocalización HTML.
HTML
<!DOCTYPE html>
<html>
<body>
<p>Displaying location using Latitude and Longitude</p>
<button class="geeks" onclick="getlocation()">
Click Me
</button>
<p id="demo1"></p>
<script>
var variable1 = document.getElementById("demo1");
function getlocation() {
navigator.geolocation.getCurrentPosition(showLoc);
}
function showLoc(pos) {
variable1.innerHTML =
"Latitude: " +
pos.coords.latitude +
"<br>Longitude: " +
pos.coords.longitude;
}
</script>
</body>
</html>
Producción:
Obtener la ubicación actual usando latitud y longitud
Manejo de Errores y Rechazos: Es muy importante manejar los errores generados en Geolocalización y mostrar un mensaje requerido cuando ocurre un error. Funciones como getCurrentPosition() hacen uso de un controlador de errores para manejar el error generado (función errHand como se usa en el ejemplo anterior). El objeto PositionError utilizado por el controlador de errores tiene dos propiedades que permiten que la función maneje el error de manera eficiente.
- Código
- Mensaje
Errores generados en la geolocalización:
| Error | Error de descripción |
|---|---|
| ERROR_DESCONOCIDO | Un error desconocido |
| PERMISO DENEGADO | La aplicación no tiene permiso para hacer uso de los servicios de localización. |
| POSICIÓN_NO DISPONIBLE | La ubicación del dispositivo es incierta. |
| SE ACABÓ EL TIEMPO | El tiempo para obtener la información de la ubicación superó el intervalo de tiempo de espera máximo |
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Errors in geolocation</title>
<style>
.gfg {
font-size: 40px;
font-weight: bold;
color: #009900;
margin-left: 20px;
}
.geeks {
margin-left: 150px;
}
p {
font-size: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<p>Error handling in geolocation</p>
<button class="geeks" onclick="getlocation()">
Click
</button>
<p id="demo1"></p>
<script>
var variable1 = document.getElementById("demo1");
function getlocation() {
navigator.geolocation.getCurrentPosition(showLoc, errHand);
}
function showLoc(pos) {
variable1.innerHTML =
"Latitude: " +
pos.coords.latitude +
"<br>Longitude: " +
pos.coords.longitude;
}
function errHand(err) {
switch (err.code) {
case err.PERMISSION_DENIED:
variable1.innerHTML =
"The application doesn't have the" +
"permission to make use of location services";
break;
case err.POSITION_UNAVAILABLE:
variable1.innerHTML = "The location of the device is uncertain";
break;
case err.TIMEOUT:
variable1.innerHTML = "The request to get user location timed out";
break;
case err.UNKNOWN_ERROR:
variable1.innerHTML =
"Time to fetch location information exceeded" +
"the maximum timeout interval";
break;
}
}
</script>
</body>
</html>
Producción:
Manejo de errores en Geolocalización
Mostrar resultado en MAP: Mostrar la ubicación en un mapa es una tarea muy interesante. Estos servicios se utilizan para proporcionar la ubicación exacta en el mapa.
Ejemplo: este ejemplo describe cómo obtener la posición actual en Google Map con la ayuda de la latitud y la longitud a través de la geolocalización HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Display location in map</title>
<style>
.gfg {
font-size: 40px;
font-weight: bold;
color: #009900;
margin-left: 20px;
}
.geeks {
margin-left: 150px;
}
p {
font-size: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<p>Display location in map</p>
<button class="geeks" type="button" onclick="getlocation();">
Current Position
</button>
<div id="demo2"
style="width: 500px; height: 500px"></div>
<script src=
"https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function getlocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showLoc, errHand);
}
}
function showLoc(pos) {
latt = pos.coords.latitude;
long = pos.coords.longitude;
var lattlong = new google.maps.LatLng(latt, long);
var OPTions = {
center: lattlong,
zoom: 10,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
},
};
var mapg = new google.maps.Map(
document.getElementById("demo2"),
OPTions
);
var markerg = new google.maps.Marker({
position: lattlong,
map: mapg,
title: "You are here!",
});
}
function errHand(err) {
switch (err.code) {
case err.PERMISSION_DENIED:
result.innerHTML =
"The application doesn't have the permission" +
"to make use of location services";
break;
case err.POSITION_UNAVAILABLE:
result.innerHTML = "The location of the device is uncertain";
break;
case err.TIMEOUT:
result.innerHTML = "The request to get user location timed out";
break;
case err.UNKNOWN_ERROR:
result.innerHTML =
"Time to fetch location information exceeded" +
"the maximum timeout interval";
break;
}
}
</script>
</body>
</html>
Producción:
Obtener la posición actual en Google Map
Navegadores compatibles:
- Google Chrome 5 y superior
- Microsoft Edge 12 y superior
- Firefox 3.5 y superior
- Internet Explorer 9 y superior
- Ópera 10.6 y superior
- Safari 5 y superior
Publicación traducida automáticamente
Artículo escrito por DikshaTewari y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA