El método getCurrentPosition
El método getCurrentPosition()
se utiliza para obtener la posición de un dispositivo.
navigator.geolocation.getCurrentPosition( siHayExito, enCasoDeError ( opcional ), opciones ( opcional ) );
Si hay éxito
La función siHayExito
es un gestor ( handler ) y será llamada si hay éxito. Toma como único argumento el objeto posicion
("p" en la siguiente tabla que detalla las propiedades de la posicion
).
Propiedad | Descripción |
---|---|
p.coords.latitude | La latitud como número decimal |
p.coords.longitude | La longitud como número decimal |
p.coords.accuracy | La exactitud de la posición |
p.coords.altitude | La altitud en metros sobre el nivel del mar |
p.coords.altitudeAccuracy | La exactitud de la altitud |
p.coords.heading | El rumbo en grados, respecto al Norte (en el sentido del reloj). |
p.coords.speed | La velocidad en metros por segundo |
p.timestamp | La facha/hora de la respuesta |
Si hay éxito podemos recuperar la latitud y la longitud ( podemos recuperar mucho más ) mediante la función siHayExito()
, y sacarlo en pantalla como contenido ( innerHTML
) del <div id="ubicacion">
.
// la función muestraMiUbicacion ahora se llama siHayExito
function siHayExito(posicion){
var latitud = posicion.coords.latitude
var longitud = posicion.coords.longitude
var output = document.getElementById("ubicacion");
output.innerHTML = "Latitud: "+latitud+" Longitud: "+longitud;
}
En caso de error
La función enCasoDeError
( opcional ) es una función de gestión de errores ( error handler ), que será llamada en caso de error.
Toma como único argumento el objeto "error" ( "e" en la siguiente tabla ) que contiene un código numérico que corresponde al tipo de error ocurrido.
e.code | Constante asociada | Descripción |
---|---|---|
0 | UNKNOWN_ERROR | Error desconocido |
1 | PERMISSION_DENIED | Permiso denegado por el usuario |
2 | POSITION_UNAVAILABLE | La ubicación no está disponible |
3 | TIMEOUT | Se agotó el tiempo de espera |
Por alguna parte dentro del HTML pondremos un <div id="ubicacion">
que utilizaremos para sacar el resultado en pantalla.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="geo.js"></script>
</head>
<body>
<div id="ubicacion">
Tus coordenadas aparecerán aquí
</div>
</body>
</html>
La función siHayError
La función siHayError()
contiene un objeto ( posiblesErrores
) que "traduce" el código de error ( error.code
) al castellano.
Cuando el error.code == 0
o error.code == 2
habrá información adicional ( en inglés ) y es posible que nos interese conocerla, al menos en la etapa de desarrollo.
Al final sacaremos el mensaje de error en pantalla como innerHTML
del <div id="ubicacion">
.
function siHayError(error){//errorHandler
// el objeto posiblesErrores traduce al castellano los posibles errores
var posiblesErrores = {
0:"Error desconocido",
1:"Permiso denegado por el usuario.",
2:"Posici\363n no disponible",
3:"Desconexi\363n por tiempo"
}
var mensajeError = posiblesErrores[error.code];
// error.message : información adicional
if(error.code == 0 || error.code == 2){
mensajeError = mensajeError +" "+error.message;
}
var div = document.getElementById("ubicacion");
div.innerHTML = mensajeError;
}
La función siHayError ( otra variante )
Si queremos podemos utilizar un switch
en lugar del objeto posiblesErrores
con el mismo propósito. Esta vez vamos a utilizar la constante asociada en lugar del código numérico.
function siHayError(error){//errorHandler
// traduce al castellano los posibles errores
switch(error.code){
case error.PERMISSION_DENIED:
mensajeError = "Permiso denegado por el usuario."
break;
case error.POSITION_UNAVAILABLE:
mensajeError = "Posici\363n no disponible."+" "+error.message;
break;
case error.TIMEOUT:
mensajeError = "Desconexi\363n por tiempo."
break;
case error.UNKNOWN_ERROR:
mensajeError = "Error desconocido."+" "+error.message;
break;
}
var div = document.getElementById("ubicacion");
div.innerHTML = mensajeError;
}
Opciones ( parámetro opcional )
Cada navegador interpreta estas opciones a su manera, y por ahora son más indicios que indicaciones.
En principio, con este parámetro ( options ) podemos controlar la precisión ( accuracy
), el tiempo máximo alocado para calcular las coordenadas.
var opciones = {enableHighAccuracy: false, timeout: Infinity, maximumAge: 0}
enableHighAccuracy: puede ser true
o false
.
Si enableHighAccuracy: true
indicamos a la aplicación que queremos el máximo de precisión ( accuracy ) posible.
Esto puede ser muy útil si queremos localizar la ubicación del usuario a nivel calle ( por ejemplo ), aunque – puede ser también uninconveniente
ya que puede causar tiempos de respuestas mas lentos, y en el caso de los dispositivos móviles puede agotar la batería.
timeout: El valor de timeout
se da en milisegundos
, e indica el tiempo máximo de espera antes de llamar
la función siHayError
. Por ejemplo si timeout: 10000
( 10 segundos ) la aplicación esperará 10 segundos por una respuesta.
Si en 10 segundos no hay respuesta, llamará la función siHayError
y tendremos "desconexión por tiempo"
.
Por
defecto timeout: Infinity
.
maximunAge: es el tiempo máximo durante el cual la información guardada en el caché puede ser aprovechada.
Un valor de maximumAge : 0
obliga el navagador a recalcular la ubicación cada vez que llamamos el método getCurrentPosition()
.
Poniendolo todo junto
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="geo.js"></script>
</head>
<body>
<div id="ubicacion">
Tus coordenadas aparecerán aquí
</div>
</body>
</html>
window.onload = miUbicacion;
function miUbicacion(){
// Si los servicios de geolocalización están disponibles
if(navigator.geolocation){
// Para obtener la ubicación actual llama getCurrentPosition.
navigator.geolocation.getCurrentPosition(
siHayExito,
siHayError,
{enableHightAccuracy: false, timeout:Infinity, maximage:0} );
}else{
alert("Los servicios de geolocalizaci\363n no est\341n disponibles");
}
}
function siHayExito(posicion){
var latitud = posicion.coords.latitude
var longitud = posicion.coords.longitude
var output = document.getElementById("ubicacion");
output.innerHTML = "Latitud: "+latitud+" Longitud: "+longitud;
}
function siHayError(error){//errorHandler
// el objeto posiblesErrores traduce al castellano los posibles errores
var posiblesErrores = {
0:"Error desconocido",
1:"Permiso denegado por el usuario.",
2:"Posici\363n no disponible",
3:"Desconexi\363n por tiempo"
}
var mensajeError = posiblesErrores[error.code];
// error.message : información adicional
if(error.code == 0 || error.code == 2){
mensajeError = mensajeError +" "+error.message;
}
var div = document.getElementById("ubicacion");
div.innerHTML = mensajeError;
}
OJO: Google Chrome ya no soporta la utilización de la API HTML5 de Geolocalización en páginas no seguras, es decir que no utilizan conexiones cifradas (HTTPS). Si esta demostración no funciona en su navegador, puede ver esta demostración en codepen.io.
La geolocalización parece no funcionar en Firefox para Mac o Linux. Este es un enlace que nos permite verificar si la geolocalización funciona en el navegador que utilizamos: http://html5demos.com/geo