¿Quieres localizar a un usuario de la red?

Publicado: junio 9, 2013 en Actualidad
Etiquetas:, , ,

                                                                                                                                               1º Parte del tutorial

Seguimos con la serie de tutoriales de HTML5 y vamos a ver cómo funciona el Localizador en html5. La Geolocalización permitirá a sus visitantes a compartir su ubicación actual por medio de su latitud y longitud (esto si el usuario lo permite), dependiendo de cómo se está visitando su sitio su ubicación puede ser determinada por cualquiera de las siguientes maneras:

  • dirección IP (IP address)
  • Conexión de red inalámbrica (wireless network connection)
  • GPS (GPS hardware on the device)
  • GSM/CDMA Cell IDs

Bueno también el éxito de la Geolocation también depende del navegador que se esté usando, así que vamos a ver cuáles de ellos lo soportan.

Geolocation-soporte-navegadores

La geolocalización es mucho más preciso para los dispositivos con GPS, como el iPhone.

Propiedades de la ubicación:

La posición especifica la ubicación geográfica actual del dispositivo, esta se expresa como un conjunto de coordenadas geográficas junto con la información de partida y velocidad

Geolocation-propiedades

Geolocation nos proporciona los siguientes métodos

Los métodos JavaScript que utiliza para la ubicación de un usuario los hace a través del Geolocation object contenido en window.navigator.geolocation.

Metodos-Geolocalizacion

Bueno, pienso que haciendo más práctico este asunto vamos a entender mejor el funcionamiento de la geolocalización en html5, solo vamos a obtener las coordenadas del usuario y el el segundo tutorial veremos como traducir esto en un mapa de Googlemaps. Vamos a ver el codigo completo y luego vamos a analizarlo.

<!DOCTYPE html>

<html lang="es">

<head>

 <meta charset="utf-8"/>

 <title>Ubicación</title>

   <script type="text/javascript">

     function localizar()

      {

        navigator.geolocation.getCurrentPosition(ubicacion,error);

      }

     function ubicacion(posicion)

      {

        var contenedor = document.getElementById("mapa");

        var latitud = posicion.coords.latitude;

        var longitud = posicion.coords.longitude;

        var precision = posicion.coords.accuracy;

          alert("Lat="+latitud+" - Long="+longitud+" - Precision="+precision);

       }

      function error(error)

       {

         if(error.code == 0)

            alert("Error Desconocido");

         else if(error.code == 1)

            alert("No fue posible contactarte");

         else if(error.code == 2)

            alert("No hay una ubicacion disponible");

         else if(error.code == 3)

            alert("Tiempo agotado");

        else

            alert("Error Desconocido");

        }

    </script>

</head>

 <body>

  <button onClick="localizar()">Ver mi Ubicación </button>

 </body>

</html>

Ok, vamos a ver qué significa todo este código, vamos a verlo parte por parte.

1 Rutina que obtiene la ubicación del usuario

function localizar()

    {

      navigator.geolocation.getCurrentPosition(ubicacion,error);

    }

// Dentro de las etiquetas de <script> Creamos una función llamada localizar, y dentro de ella colocamos navigator.geolocation.getCurrentPosition(mapa,error);que lo que hacemos es llamar la función localización del navegador del usuario y nos va a devolver la longitud y latitud del mismo.

Dentro de getCurrentPosition tenemos la opción de incluir dos funciones que luego ampliaremos, pero la primera se cumple si es posible ubicar a el usuario y la segunda si no se puede, a la primera le llamamos ubicación y la segunda error.

2 Rutina que imprime las coordenadas

 

function ubicacion(posicion)

    {

        var contenedor = document.getElementById("ubicacion");

    var latitud = posicion.coords.latitude;

    var longitud = posicion.coords.longitude;

    var precision = posicion.coords.accuracy;

     alert("Lat="+latitud+" - Long="+longitud+" - Precision="+precision);

    }

// En el código anterior creamos la función ubicación, que nos mostrara la ubicación siempre y cuando no haya algún error, dentro creamos tres variables, que por medio de las coordenadas de las propiedades de ubicación vamos a obtener la ubicación exacta, la primera para obtener la latitud, después la longitud y luego la precisión, esto lo mostramos en una ventana emergente de javascript por medio de un alert. Así, ya podemos obtener la ubicación del usuario.

3 Rutina de error

function error(error)

     {

     if(error.code == 0)

                alert("Error Desconocido");

         else if(error.code == 1)

        alert("No fue posible contactarte");

         else if(error.code == 2)

            alert("No hay una ubicacion disponible");

         else if(error.code == 3)

        alert("Tiempo agotado");

         else

        alert("Error Desconocido");

     }

// Creamos la función error, que es la que tomara el papel principal cuando el métodogetCurrentPosition tenga problemas para obtener la ubicación. Vemos que tenemos unos errores del 0 al 3,

  • 0: Error desconocido
  • 1: Permiso denegado, el usuario no permite que el navegador envíe datos de geolocalización.
  • 2: No se ha podido obtener una ubicación.
  • 3: Se ha superado el tiempo de espera máximo para obtener la ubicación.

Lo que hacemos es especificar los errores cada uno con su respectivo mensaje a mostrar en caso de que se de alguno.

4

 

<body>

  <button onClick="localizar()">Ver mi Ubicación </button>

</body>

 

 

// Luego en el body creamos un botón con el atributo onClick=”localizar()” que lo que hacemos es que cuando la persona de click al botón se ponga en marcha la función madre de todo el código de geolocalizar que hemos creado.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s