[HTML 5] Trabajando con la geolocalización

Posted on Actualizado enn


Otra de las cosas nuevas que trae HTML5 es la geolocalización, con ella podemos determinar en qué lugar (coordenadas) se encuentra un usuario.

Determinar la posición de un usuario es bastante sencillo, y en este post les voy a mostrar como lo podemos hacer, y como complemento, mostraremos dicha ubicación en un mapa utilizando Bing Maps.

La sintaxis general para trabajar con la geolocalización es:

   1:  navigator.geolocation.getCurrentPosition(GetPosition,funcionError, options);

Entonces se utilice el método getCurrentPosition de geolocation, donde el primer parámetro es la función que se llama si todo nos sale bien, la segunda será la función que se ejecuta cuando algo falla y por último podemos definir un set de opciones.

Algunas de las opciones que podemos definir son:

· enableHighAccuracy: De tipo booleano, indica si se debe obtener la posición más acertada.

· timeout: indica el tiempo permitido en milisegundos para intentar obtener la posición.

Una vez obtenida la posición accedemos a las coordenadas (latitud y longitud) mediante un objeto position, el cual contiene dicha información.

Ahora que ya tenemos algo (no toda) de teoría manos a la obra, la idea como comente antes es mostrar en donde estamos en un mapa, y por otro lado vamos a tener dos campos de texto para mostrar la latitud y la longitud.

Escribir el HTML:

De una manera muy simple tenemos los dos campos de texto para mostrar la latitud y la longitud, y por otro lado un div el cual será nuestro mapa:

   1:  <p>Geolocalizacion en HTML 5</p>
   2:  <p>Latitud:<input type="text" id="txtLatitud" /></p>
   3:  <p>Longitud:<input type="text" id="txtLongitud" /></p>
   4:  <hr/>
   5:  <div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>   

Referenciar los JavaScript

Ahora se debe referenciar el archivo js de jQuery y el API de Bing Maps:

   1:  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
   2:  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

Definir las opciones:

Definir en un variable las opciones que vamos a utilizar:

   1:  var options = {
   2:      enableHighAccuracy: true,
   3:      timeout: 45000
   4:  };

Obtener posición:

   1:  navigator.geolocation.getCurrentPosition(GetPosition,funcionError, options);

Luego definimos la función funcionError:

   1:  function funcionError(error)
   2:  {
   3:      alert(error.message);
   4:  }

Y la función GetPosition:

   1:  function GetPosition(posicion)
   2:  {
   3:      var latitud = posicion.coords.latitude;
   4:      var longitud = posicion.coords.longitude;
   5:      $("#txtLatitud").val(latitud);
   6:      $("#txtLongitud").val(longitud);
   7:      GetMap(latitud,longitud);
   8:  }

En esta función lo interesante es que tenemos la variable posicion, y es por medio de ella que accedemos a los valores de latitud y longitud respectivamente, finalmente se observa el llamado a la función GetMap, la cual recibe la latitud y la longitud para poder ubicarse en el mapa, en resumen la función GetMap sería:

   1:  function GetMap(a,b)
   2:  {   
   3:      var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
   4:          {credentials: "######",
   5:          center: new Microsoft.Maps.Location(a, b),
   6:          mapTypeId: Microsoft.Maps.MapTypeId.road,
   7:          zoom: 8});
   8:  }

Pero esa parte ya nos la da es el API de Bing, y en donde dice ### debemos colocar el número dado por el API.

Listo, ahora un tema importante es que cuando se intente obtener la localización del usuario, siempre el usuario debe permitir realizar dicha acción, es por eso que al cargar la página vemos que se muestra un mensaje como (mensaje tomado de Internet Explorer 9):

Imagen1

Y allí el usuario puede decidir aceptar o rechazar la petición de localización, en caso afirmativo lo que se va a obtener es:

Imagen2

Espero les haya gustado el post, así que les dejo el ejemplo y claro, viene más de HTML5.

Descarga el ejemplo! (ten en cuenta que para que le ejemplo te funcione debes colocar la key que te da el API de Bing)

7 comentarios sobre “[HTML 5] Trabajando con la geolocalización

    Judavi escribió:
    03/06/2012 en 10:18

    Que buen recurso! Voy a probarlo que tal funciona… Por cierto… sabes como funciona el asunto de la localización… es bastante preciso y solo tiene como recurso la dirección ip no?

      Pep Sanchez escribió:
      03/07/2012 en 11:34

      judavi lo probaste? yo ahora lo probare pero intentaré adaptarlo a google maps no se si es posible o no pero bueno voy a ir probando.

        Julio Avellaneda respondido:
        03/07/2012 en 11:39

        Si, claro te funciona tmb con Google Maps, no tienes problema pq la geolocalización te da es latitud y longitud

      Julio Avellaneda respondido:
      03/07/2012 en 11:38

      Gracias, el tema de como determina la ubicación algunas veces puede ser no muy exacta, por el tema de resolución de IP, gateways y demás, y el como funciona bueno si me queda un time escribo el tema, sino te mando algun documento vale

    […] [HTML5] Trabajando con la geolocalización […]

    devteam escribió:
    05/29/2012 en 17:41

    Reblogged this on Dev Team.

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:04

    […] [HTML 5] Trabajando con la geolocalización […]

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