El método getCurrentPosition

facebook-svg gplus-svg twitter-svg

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;
}
Tus coordenadas aparecerán aquí

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