La API Geolocation fue diseñada para que
los navegadores puedan proveer un mecanismo de detección por defecto que
permita a los desarrolladores determinar la ubicación física real del usuario.
Previamente solo contábamos con la opción de construir una gran base de datos
con información sobre direcciones IP y programar códigos exigentes dentro del
servidor que nos darían una idea aproximada de la ubicación del usuario
(generalmente tan imprecisa como su país).
Una de sus API’s que tiene un futuro
prometedor y muy funcional es la de Geolocalización. Básicamente esta API define
como un navegador web puede determinar la ubicación
geográfica de un usuario, esta ubicación de coordenadas se da en
Latitud y Longitud, que pueden ser más o menos precisa,
de esto hablaremos más adelante.
getCurrentPosition(ubicación, error, configuración) Este es el método utilizado para consultas individuales. Puede recibir hasta tres atributos: una función para procesar la ubicación retornada, una función para procesar los errores retornados, y un objeto para configurar cómo la información será adquirida. Solo el primer atributo es obligatorio para que el método trabaje correctamente.
watchPosition(ubicación, error, configuración) Este método es similar al anterior, excepto que comenzará un proceso de vigilancia para la detección de nuevas ubicaciones. Trabaja de forma similar que el conocido método setInterval() de Javascript, repitiendo el proceso automáticamente en determinados períodos de tiempo de acuerdo a la configuración por defecto o a los valores de sus atributos.
clearWatch(id) El método watchPosition() retorna un valor que puede ser almacenado en una
variable para luego ser usado como referencia pro el método clearWatch() y así
detener la vigilancia. Este método es similar a clearInterval() usado para
detener los procesos comenzados por setInterval().
Hablando un poco de
algunas propiedades interesantes que arroja el objeto coordinates;
puede contener valores nulos, lo que significa que no debemos asustarnos ya que
esto funciona según las capacidades del hardware donde lo visualiza:
- latitude (latitud): La posición norte-sur sobre la
tierra.
- longitude (Longitud): La posición de occidente a oriente
sobre la tierra
- altitude (altitud): La altura de la posición, solo si el
dispositivo de visualización tiene la capacidad de
medir la altitud.
- accuracy (exactitud): Precisión de las alturas, exactitud, que es
medida en metros.
- heading: Dirección y recorrido,
medida en grados alrededor de un círculo.
- speed (velocidad): La velocidad de
desplazamiento en una partida determinada en metros por
segundo.
DEMOSTRACIÓN
En
el espacio de nombre del proyecto damos click derecho y seleccionamos Add à New Items
En
la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como
nombre del archivo “Geolocalizacion.html”, para luego presionar el botón Add.
Nuevamente
en el panel de proyecto le damos click derecho al mismo y le damos a la opción Add
à New Folder.
A
la nueva carpeta vamos a llamarla “Scripts”.
Situamos
el mouse encima de la carpeta “Scripts” y le damos click derecho y
seleccionamos Add à
New Items
Seleccionamos
la opción de JavaScript File y le damos el nombre de geolocation.
Al dar click en el botón “Add”, Nuevamente nos ubicamos en la carpeta “Scripts” y
colocamos el archivo para llamar a todas las bibliotecas correspondiente de
Scripts.
En
el archivo “geolocation.js” empezamos escribiendo la siguiente línea de código
de JavaScript
addEventListener() Registra
un evento a un objetivo en especifico.
Sintaxis
target.addEventListener(tipo,
listener[, useCapture]);
Tipo
Una cadena representando el tipo de evento a
escuchar.
Listener
El objeto que recibe una notificación cuando un evento de el tipo especificado ocurre. Debe ser un objeto implementando la interfaz EventListener o solo una function en JavaScript.
useCapture (Optional)
Si es true, useCapture indica que el
usuario desea iniciar la captura. Después de iniciar la captura, todos
los eventos del tipo especificado serán lanzados
al listener registrado antes de comenzar a ser controlados por algún EventTarget que
esté por debajo en el árbol DOM del documento.
Arriba de nuestro código, escribiremos lo siguiente:
El mismo será una función para el manejo de cualquier
tipo de error. Arriba de este codificaremos los métodos Iniciar() y Obtener()
El método Geolocation.getCurrentPosition() se
utiliza para obtener la posición de un dispositivo. A continuación realizaremos
el método mostrar() donde capturaremos la latitud, longitus y exactitud y la
mandaremos a escribir en el navegador.
El código completo quedaría de la siguiente forma:
Nos
ubicamos en el archivo de “Geolocalizacion.html” y procedemos a maquetar
Procedemos a dar click derecho en la página
“Geolocalizacion.html” y seleccionamos la opción para que sea la página de
inicio.
Y al desplegar nuestra página web:
Al dar click en el botón “Obtener mi Ubicación”
El navegador te mostrará la ubicación donde nos
encontramos. Si bien queremos en véz de ver nuestra ubicación por números y
utilizar un mapa, google tiene un api que nos facilita todo.
En Visual Studio en nuestro archivo “geolocation.js”
comentaremos el método mostrar y debajo de él escribiremos la codificación
correspondiente para usar la api.
Desplegamos la página nuevamente
Al dar click en el botón “Obtener mi Ubicación”
