contenido 1 de junio de 2014 a las 08.22
   Imprimir artículo
elWebmaster.com

Geolocalizaci贸n con HTML5


html5logowideLa API de geolocalizaci贸n de HTML5 ayuda en la identificaci贸n de la ubicaci贸n del usuario, que se puede utilizar para proporcionar informaci贸n espec铆fica de la ubicaci贸n o los detalles de la ruta de navegaci贸n del usuario. Hay muchas t茅cnicas usadas para identificar la ubicaci贸n del usuario. Un navegador de escritorio generalmente, utiliza t茅cnicas de posicionamiento basadas en WIFI o IP , mientras que un navegador m贸vil utiliza la triangulaci贸n celular, GPS , A-GPS, t茅cnicas de posicionamiento basadas en WIFI, etc. La API de geolocalizaci贸n utilizar谩 cualquiera de estas t茅cnicas para identificar la ubicaci贸n del usuario.

La API de geolocalizaci贸n protege la privacidad del usuario, estableciendo que el permiso del usuario debe ser buscado y obtenido antes de enviar la informaci贸n de la ubicaci贸n del mismo a cualquier sitio web. As铆 que al usuario se le pedir谩 con un popover o cuadro de di谩logo el permiso para compartir la informaci贸n de su ubicaci贸n . El usuario puede aceptar o rechazar la solicitud.

Ahora primero que nada debemos entender la API y luego trazar su ubicaci贸n en los mapas de Google.

El primer paso para utilizar cualquiera de las API de HTML5 es para comprobar su compatibilidad con el navegador.

Comprueba la compatibilidad del navegador

La propiedad de geolocalizaci贸n del objeto general de navegaci贸n ayuda a detectar el soporte de los navegadores para la API.

if (navigator.geolocation) {

// Obteniendo la posici贸n actual del usuario

} else {

alert(‘La geolocalizaci贸n no es soportada en tu navegador’);

}

Obtener la ubicaci贸n actual del usuario

La ubicaci贸n actual del usuario se puede obtener usando la funci贸n getCurrentPosition del objeto navigator.geolocation. Esta funci贸n acepta tres par谩metros: la funci贸n de retorno exitoso success, funci贸n callback de error y las opciones de posici贸n position. Si los datos de ubicaci贸n se buscan con 茅xito, la funci贸n success se invocar谩 con el objeto position obtenida como par谩metro de entrada. De lo contrario, la funci贸n de de error ser谩 invocada con el objeto de error como par谩metro de entrada.

if (navigator.geolocation) {

// Obteniendo la posici贸n actual del usuario

navigator.geolocation.getCurrentPosition(showPosition, showError, optn);

} else {

alert(‘La geolocalizaci贸n no es soportada por tu navegador’);

}

1. Funci贸n de devoluci贸n de Success

Esta funci贸n de devoluci贸n se invoca s贸lo cuando el usuario se compromete a compartir la informaci贸n de su ubicaci贸n y los datos de localizaci贸n se buscaron con 茅xito por el navegador. Los datos de localizaci贸n estar谩n disponibles como un objeto de posici贸n y la funci贸n ser谩n llamados con el objeto posici贸n como su par谩metro de entrada. Un objeto position contiene una propiedad de marca de tiempo que indica la hora en que se recuperan los datos de localizaci贸n y un objeto coords.

El objeto coords tiene las siguientes propiedades

Latitude, longitude – Las coordenadas geogr谩ficas en grados decimales

Accuracy – Nivel de precisi贸n de la latitud y coordenadas de longitud en metros. Mientras m谩s grande es el n煤mero menor es la precisi贸n

Altitude – Altura de la posici贸n por encima del nivel del mar en metros

AltitudeAccuracy – Denota cuan lejos la posici贸n de altura podr铆a estar a partir del valor actitud real obtenido en metros. Mientras m谩s grande es el n煤mero menor es la precisi贸n

Heading – Proporciona informaci贸n sobre el rumbo de 360 鈥嬧媑rados

Speed – Indica la velocidad relativa expresada en metros por segundo

function showPosition(position) {

document.write(‘Latitude: ‘+position.coords.latitude+’Longitude: ‘+position.coords.longitude);

}

2. Funci贸n callback de error

Esta es una funci贸n opcional que toma un objeto ‘Error de posici贸n’ como par谩metro de entrada. Esta funci贸n se invoca en cualquiera de las siguientes circunstancias:

  • Error desconocido
  • Tiempo de espera agotado
  • El usuario ha negado a compartir la informaci贸n de ubicaci贸n
  • Misma informaci贸n de ubicaci贸n disponible

function showError(error) {

switch(error.code) {

case error.PERMISSION_DENIED:

alert(“El usuario no acepto la petici贸n de la geolocalizaci贸n”);

break;

case error.POSITION_UNAVAILABLE:

alert(“La informaci贸n de la localizaci贸n no est谩 disponible.”);

break;

case error.TIMEOUT:

alert(“La petici贸n para obtener la localizaci贸n del usuario ha superado el tiempo”);

break;

case error.UNKNOWN_ERROR:

alert(“Error desconocido”);

break;

}

}

3. Opciones de posici贸n

En 茅l se describen las opciones a utilizar en el momento de recuperar la localizaci贸n del usuario.
enableHighAccuracy: es un Boolean. Si es verdad, el agente del usuario va a tratar de proporcionar la posici贸n m谩s precisa. Esto puede resultar un tiempo m谩s lento de respuesta y mayor consumo de energ铆a. Si es falso, se obtendr谩 la posici贸n menos precisa. El valor predeterminado es falso.
timeout: es un valor long (num茅rico largo) positivo. Denota el tiempo m谩ximo (en milisegundos) que el agente del usuario puede llegar a responder con los datos de localizaci贸n. El valor predeterminado es Infinito.
maximumAge:聽es un valor long (num茅rico largo) positivo.聽Denota el tiempo (en milisegundos) que el agente del usuario puede seguir utilizando los datos de localizaci贸n en cach茅 antes de tratar de obtener nuevos datos de localizaci贸n. Un valor en cero indica que el agente del usuario no debe utilizar los datos de ubicaci贸n en la memoria cach茅 y el valor infinito indica que los datos de localizaci贸n en cach茅 deben ser utilizados por el agente del usuario.

if (navigator.geolocation) {

var optn = {

enableHighAccuracy : true,

timeout : Infinity,

maximumAge : 0

};

navigator.geolocation.getCurrentPosition(showPosition, showError, optn);

} else {

alert(‘La geolocalizaci贸n no es soportada por este navegador’);

}

Rastrear cambios de ubicaci贸n

El watchPosition() Se Puede utilizar p谩rr Obtener el los Datos De localizacion a Intervalos Regulares. La Funci贸n de devoluci贸n de llamada correcta viene s铆 invoca automaticamente A MEDIDA Que el Dispositivo o los casas de cambio de posicion de referencia. Los Lista de par谩metros of this Funci贸n de es parecida a la getCurrentPosition Funci贸n (). Devuelve sin valor de ID pueden utilizarse Que de reloj p谩rr anular el Registro de la Funci贸n de devoluci贸n de llamada correcta viene al pasarla a la Funci贸n clearWatch (.)
function startWatch(){
if (navigator.geolocation) {
var optn = {
enableHighAccuracy : true,
timeout : Infinity,
maximumAge : 0
};
watchId = navigator.geolocation.watchPosition(showPosition, showError, optn);
} else {
alert(‘Geolocation is not supported in your browser’);
}
}
function stopWatch() {
. 聽 if (watchId) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
}
}

Mostrar mi ubicaci贸n en Google Maps

Con el fin de trazar tu ubicaci贸n en Google Maps podemos hacer uso de la API de Google Maps junto con la API de geolocalizaci贸n.
En primer lugar, debemos convertir las coordenadas de latitud y longitud del objeto de posici贸n obtenida mediante la API de geolocalizaci贸n en un objeto latLng de Google Maps.
var googlePos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

2. Crea un objeto Map especificando las opciones de visualizaci贸n del mapa y el contenedor div HTML donde el mapa se debe mostrar.
En el ejemplo a continuaci贸n se especifican tres opciones de visualizaci贸n del mapa
zoom – Especifica el nivel de zoom
center – Especifica que el mapa debe estar centrado en la localizaci贸n del usuario
mapTypeId – Puede ser Roadmap, Sat茅lite o H铆brido
var mapOptions = {
zoom : 12,
center : googlePos,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var mapObj = document.getElementById(‘mapTxt’);
var googleMap = new google.maps.Map(mapObj, mapOptions);

3. Crea un marcador en la localizaci贸n dada a continuaci贸n
var markerOpt = {
map : googleMap,
position : googlePos,
title : ‘Hola, estoy aqu铆’,
animation : google.maps.Animation.DROP
};
var googleMarker = new google.maps.Marker(markerOpt);

En las opciones del c贸digo marcador anterior se indica lo siguiente:
Map – Objeto Map donde deber铆a aparecer el marcador
Position – Posici贸n latlng en la que se debe mostrar el marcador
Title – T铆tulo que debe aparecer cuando pasemos por el marcador
4. Encuentra la direcci贸n de tu ubicaci贸n utilizando la API de geocodificaci贸n inversa y muestra la direcci贸n que se obtiene cuando se hace clic en el marcador.
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'latLng' : googlePos
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var popOpts = {
content : results[1].formatted_address,
position : googlePos
};
var popup = new google.maps.InfoWindow(popOpts);
google.maps.event.addListener(googleMarker, 'click', function() {
popup.open(googleMap);
});
} else {
alert('No es encontraron resultados');
}
} else {
alert('C贸digo geo fall贸 debido a: ' + status);
}
});

C贸digo de Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Mapa de Ejemplo</title>
<style>
#mapdiv {
margin: 0;
padding: 0;
width: 500px;
height: 500px;
}
</style>
<script>
var watchId = null;
function geoloc() {
if (navigator.geolocation) {
var optn = {
enableHighAccuracy : true,
timeout : Infinity,
maximumAge : 0
};
watchId = navigator.geolocation.watchPosition(showPosition, showError, optn);
} else {
alert('La geolocalizaci贸n no es soportada por tu navegador');
}
}
function showPosition(position) {
var googlePos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
zoom : 12,
center : googlePos,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var mapObj = document.getElementById('mapdiv');
var googleMap = new google.maps.Map(mapObj, mapOptions);
var markerOpt = {
map : googleMap,
position : googlePos,
title : 'Hi , I am here',
animation : google.maps.Animation.DROP
};
var googleMarker = new google.maps.Marker(markerOpt);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'latLng' : googlePos
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var popOpts = {
content : results[1].formatted_address,
position : googlePos
};
var popup = new google.maps.InfoWindow(popOpts);
google.maps.event.addListener(googleMarker, 'click', function() {
popup.open(googleMap);
});
} else {
alert('Los resultados no fueron encontrados');
}
} else {
alert('El c贸digo geo fall贸 debido a: ' + status);
}
});
}
function stopWatch() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
}
}
function showError(error) {
var err = document.getElementById('mapdiv');
switch(error.code) {
case error.PERMISSION_DENIED:
err.innerHTML = "El usuario deneg贸 la petici贸n para la geolocalizaci贸n."
break;
case error.POSITION_UNAVAILABLE:
err.innerHTML = "La informaci贸n de localizaci贸n no est谩 disponible."
break;
case error.TIMEOUT:
err.innerHTML = "La petici贸n de localizaci贸n del usuario excedi贸 el tiempo de espera."
break;
case error.UNKNOWN_ERROR:
err.innerHTML = "Error desconocido."
break;
}
}
</script>
</head>
<body onload="geoloc()">
<p id = 'mapdiv'></p>
<button onclick="stopWatch()">
Stop
</button>
</body>
</html>
Eso es todo 隆Esperamos que te sea de utilidad!
Fuente original del art铆culo: Sitepoint
Traducci贸n realizada por
elWebmaster.com

Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder