Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

  • Inicio >
  • Blog >
  • HTML5: API de xeolocalización (Geolocation API)

HTML5: API de xeolocalización (Geolocation API)

17 Xan 2013 por Luis

Comentarios: 47

HTML5

Unha das principais novidades de HTML5 foi a aparición de novas APIs de Javascript que aumentan a potencia desta linguaxe.

Unha delas é a nova API de xeolocalización, que nos permite coñecer a ubicación xeográfica do usuario, a condición de que estea usando un navegador que a teña implementada e que o usuario dea o seu permiso.

Aínda que a primeira impresión sexa que só será útil para usuarios de navegadores móbiles, a realidade é que este utiliza outros medios ademais do GPS para calcular a ubicación do usuario, por exemplo a través da súa dirección IP.

Navegadores que soportan o API de xeolocalización

Antes de nada debemos saber que navegadores soportan esta funcionalidade. Na seguinte táboa podemos velo:

NavegadorVersión
Opera10.6+
Internet Explorer9+
Safari5+
Chrome5+
Firefox3.5+
iPhone3+
Android2+

Antes de empezar a usar o API de xeolocalización teremos que comprobar que o navegador o soporta:

if (navigator.geolocation)
{
	// Código da aplicación
}
else
{
	// Non hai soporte para a xeolocalización: podemos desistir ou utilizar algún método alternativo
}

A función navigator.geolocation.getCurrentPosition

A ubicación do usuario obtense a través da seguinte función:

navigator.geolocation.getCurrentPosition(funcExito, funcError, opcións);

Esta función ten tres parámetros (os dous últimos opcionais):

  1. funcExito: función de retorno que se executará si se obtén a posición. Pasaráselle como parámetro un obxecto Position.
  2. funcError: función de retorno que se executará si non se obtén a posición. Pasaráselle como parámetro un obxecto PositionError.
  3. opcións: un obxecto PositionOptions con parámetros para a obtención da localización.

A función intentará obter a posición do usuario. Si o consegue chamará á función que lle pasemos como primeiro parámetro pasándolle un obxecto Position con eses datos. Si, pola contra, non o consegue, chamará á función que lle pasemos como segundo parámetro pasándolle un obxecto PositionError que indicará a razón pola que non o conseguiu.

O obxecto Position

É o obxecto que nos indicará a ubicación do usuario si o navegador pode determinala. Este obxecto consta dos seguintes atributos:

AtributoTipo de datoDescrición
coords.latitudedoubleLatitude en grados decimais
coords.longitudedoubleLonxitude en grados decimais
coords.accuracydoublePrecisión en metros
timestampDOMTimeStampMomento da toma destos datos
coords.altitudedouble ou nullAltitude en metros
coords.altitudeAccuracydouble ou nullPrecisión da altitude en metros
coords.headingdouble ou nullOrientación en grados decimais no sentido das agullas do reloxo
coords.speeddouble ou nullVelocidade en metros/segundo

De todos os atributos só coords.latitude, coords.longitude e coords.accuracy é seguro que terán valor. Os outros dependen das aptitudes do dispositivo que estea usando o usuario.

O obxecto PositionError

É o obxecto que nos indicará a causa pola que non se puido determinar a ubicación do usuario. Este obxecto consta de dous atributos: code e message. Destes o que nos interesa é code que será o que nos indique o erro de forma máis eficiente (message fai o mesmo pero cunha cadea explicativa do erro).

Os posibles valores do atributo code son:

ValorValor numéricoDescrición
PERMISSION_DENIED1O usuario denegou o acceso á obtención da súa ubicación
POSITION_UNAVAILABLE2Non se puido obter a ubicación do usuario por algunha razón
TIMEOUT 3Esgotouse o tempo de espera para obter a ubicación

O obxecto PositionOptions

É o obxecto que nos permitirá poñer algunhas condicións á obtención da ubicación do usuario. Este obxecto consta dos seguintes atributos:

AtributoTipo de datoValor por defectoDescrición
enableHighAccuracybooleanfalseSi o dispositivo e o usuario o permiten o navegador intentará obter a ubicación do usuario cunha maior precisión. Isto adoita supoñer un maior custo de recursos.
timeoutlongNon tenTempo de espera máximo para obter a posición en milisegundos. Este tempo empeza a contar desde que o usuario dá o seu permiso, non antes.
maximumAgelong0Antigüidade máxima en milisegundos. Co valor por defecto (0), cada vez que se pide a posición vólvese a calcular. Si poñemos algún valor maior que cero, búscase na caché e si hai unha posición tomada anteriormente non máis antiga que o valor dado, devólvese inmediatamente, aforrando moitos recursos. Co valor Infinity sempre se devolverá un valor da caché.

Hai que ter en conta que algúns dispositivos teñen distintos métodos para obter a posición si enableHighAccuracy está activado e si está desactivado, co é posible que unha chamada a getCurrentPosition con esta opción activada dea erro mentres que pode ter éxito con ela desactivada.

Obter a posición do usuario

Vexamos agora o código para obter a posición do usuario con: comprobación de si o navegador soporta xeolocalización, recollida dos datos de latitude e lonxitude, control de erros e pasándolle as opcións de tempo máximo de espera e antigüidade.

(function(){
	var content = document.getElementById("geolocation-test");

	if (navigator.geolocation)
	{
		navigator.geolocation.getCurrentPosition(function(objPosition)
		{
			var lon = objPosition.coords.longitude;
			var lat = objPosition.coords.latitude;

			content.innerHTML = "<p><strong>Latitude:</strong> " + lat + "</p><p><strong>Lonxitude:</strong> " + lon + "</p>";

		}, function(objPositionError)
		{
			switch (objPositionError.code)
			{
				case objPositionError.PERMISSION_DENIED:
					content.innerHTML = "Non se permitiu o acceso á posición do usuario.";
				break;
				case objPositionError.POSITION_UNAVAILABLE:
					content.innerHTML = "Non se puido acceder á información da súa posición.";
				break;
				case objPositionError.TIMEOUT:
					content.innerHTML = "O servizo tardou demasiado tempo en responder.";
				break;
				default:
					content.innerHTML = "Erro descoñecido.";
			}
		}, {
			maximumAge: 75000,
			timeout: 15000
		});
	}
	else
	{
		content.innerHTML = "O seu navegador non soporta a API de xeolocalización.";
	}
})();

E no seguinte cadro podemos ver o resultado deste script aplicado nesta páxina:

O script aínda non se executou.

Obter a posición do usuario cada vez que esta cambie

Si en lugar de querer obter a ubicación do usuario puntualmente queremos recibir información actualizada cada vez que esta cambie, en lugar de usar a función navigator.geolocation.getCurrentPosition, usaremos navigator.geolocation.watchPosition. Os parámetros a pasar a esta función son exactamente os mesmos que para a anterior, coa salvidade de que aínda que a anterior non devolve ningún valor, esta devolverá un identificador co que podemos parar as actualizacións de ubicación. Podemos, por exemplo, facer que o usuario pare manualmente as actualizacións desde un botón. Faríase da seguinte forma:

var watch_id = navigator.geolocation.watchPosition(function(objPosition)
{
	// Procesar posición
}, function(objPositionError)
{
	// Procesar erros
}, {
	maximumAge: 75000,
	timeout: 15000
});

document.getElementById("stop-button").onclick = function()
{
	navigator.geolocation.clearWatch(watch_id);
};

Comentarios

47 comentarios. Comentar.

1. trompo2 o 09 Ago 2013 ás 14:45:45

Muy interesante, de momento te dejo en favoritos, ...

Estoy pensando ...

Se le podrían pasar las coordenadas a google?

2. Luis o 13 Ago 2013 ás 19:09:07

Hola trompo2.

Supongo que te refieres a utilizar estas coordenadas para mostrar la posición del usuario en Google Maps o a conseguir la dirección del usuario con ellas.

Por supuesto esto se puede hacer: el primer caso con la API de Google Maps y el segundo con la API de Geocoding.

3. Rodrigo o 07 Nov 2013 ás 18:06:30

Hola! cómo hago para poner algún punto de interés.. es decir, si tengo mi página y quiero que un cliente al ver su ubicación, pueda ver qué tan lejos está mi negocio

Gracias! :D

5. Ime o 03 Dec 2013 ás 06:28:47

Hola,

Tendras un ejemplo de geocodig inverso, donde tu le pongas la dirección y te regrese las coordenadas??

6. Luis o 12 Dec 2013 ás 13:13:53

Hola Ime.

Por supuesto, en esta misma página:

http://www.arumeinformatica.es/utiles/buscar-coordenadas-...

Un saludo.

7. Anónimo o 19 Dec 2013 ás 17:05:05

Presionando un botón de buscarme tengo que levantar el domicilio y cargarlo en un text, hay ejemplos que me puedan guiar?

8. Luis o 20 Dec 2013 ás 11:05:37

Hola Anónimo.

Lee el siguiente artículo al respecto: http://www.arumeinformatica.es/blog/obtener-direccion-pos...

Un saludo.

9. Daniela o 01 Out 2014 ás 23:31:45

Hola, me parece muy interesante tu publicación y sobre todo muy bien explicada, soy nueva en todo esto, y me pregunto si es posible que me registre en mi servidor cada que alguien abra mi pagina que me deje las coordenadas de latitud y longitud en mis logs de mi server es posible??? de antemano gracias por tomarte el tiempo de responder

10. Irene. o 22 Mar 2015 ás 18:40:49

hola buenas¡ Genial el articulo es justo lo que buscaba.. aunque ando un poco perdida en todo esto. Quiero hacer un GPS con arduino. Mas bien un navegador, es decir, enviar desde Arduino mis coordenadas para despues plasmarlas en un mapa. Y mi pregunta es,¿ Es posible hacerlo a tiempo real? ¿Que me vaya mostrando la posicion que voy siguiendo?? Gracias¡¡

11. Javillo - Javier_priego_1@hotmail.com o 29 Mai 2015 ás 13:35:02

Es posible, actualmente estoy realizando un proyecto que tiene esa funcionalidad. En arduino.

12. jose eulogio ubidia casallo o 25 Xuñ 2015 ás 16:08:43

hola

sobre el arduino es posible que usted me prepare que el arduino que envie un gps aun celular y aun panel de contro que yo tengo en vivo colocando un boton pulsador de panico queria cuanto me costaria la aplicacion uno pulsa el boton de panico y al toque envia la ubicacion pero acopñañado d de una informacion de datos del usuario claro que tiene que tener el aruino para colocar un usuario y para colocar telefono y direccion espero su repuersta pronto

14. Anónimo o 24 Xul 2015 ás 20:30:36

es como el que usa la NSA

15. David Guerra o 06 Ago 2015 ás 23:57:36

Hola, estoy desarrollando una pagina web, pero quiero que cuando una persona entre a mi pagina, a mi me llegue un email con su ubicación. Alguien me puede ayudar?

16. oswal o 13 Ago 2015 ás 19:31:03

buenas tardes me gustaria saber si me pueden colaboraran con un codigo para localizacion de usuarios con dispositivo movil en la zona no mayor a 3000 mts a la redonda agradezco su colaboracion

17. cristian o 24 Ago 2015 ás 21:07:29

amigos

agradecere su ayuda, necesito guardar en txt o algo asi la pisicion de los visitantes y poder mostrarlos todos en un solo mapa, asi puedo saber a que distancia esta uno de otro.

es posible??

desde ya gracias

ca3bkn@gmail.com

18. Reinaldo o 05 Out 2015 ás 19:28:04

Hola, estoy desarrollando una pagina web, pero quiero que cuando una persona entre a mi pagina, a mi me llegue un email con su ubicación. Alguien me puede ayudar?

19. Axel o 19 Nov 2015 ás 22:57:36

Hola estoy usando my maps y tengo puntos en todo el país. Me interesa que del estado donde lo vean se acerque a esa zona,¿Se puede?

20. Luis o 19 Nov 2015 ás 23:34:41

Hola Axel.

Una vez que tienes la posición del usuario con el código que explicamos en este artículo, sólo tienes que centrar el mapa y hacer zoom sobre ese punto.

Si estás utilizando Google Maps (no se qué es my maps), es sólo utilizar las funciones setCenter y setZoom.

Un saludo.

21. Locke Yen o 10 Dec 2015 ás 15:22:52

Hola.

Estoy trabajando en una web y me gustaría que la geolocalización la determinara el propio usuario. Es decir, el usuario seleccionaría un lugar concreto en el mapa. La idea es que, de una forma sencilla y amigable, cada usuario marcara su propio lugar en el mapa, y fuera visible para el resto de usuarios.

Como soy muy novato, agradecería una ayuda en este sentido.

Muchas gracias.

Jose

22. Anónimo XD o 17 Dec 2015 ás 18:37:27

exste alguna manera de no pedir confirmacion al usuario?

23. GF o 02 Feb 2016 ás 00:22:13

Hola estoy intentando hacer un área con las coordenadas que obtengo con este codigo, pero no encuentro información al respecto, necesito ayuda.

24. Betuel Turrubiarte o 06 Abr 2016 ás 05:52:11

hola yo no soy programador pero quiero una app para pedir plomeros o electricistas, con funcionalidades como si se pidiera un taxi, que me mande la ubicacion del usuario a mi cel. y poderle enviar la mia para confirmar que voy para alla, algo aprecido a uber, o easytaxi. como sera el codigo? espero me puedas apoyar.

saludos

26. Anónimo o 22 Abr 2016 ás 22:47:52

hay alguna forma de colocar el mapa de google con todas las opciones de rutas

27. Anónimo o 03 Ago 2016 ás 19:00:27

Soy nueva en esto, no me envía ningun mensaje. solamente debo de agregar la funcion y ya?

28. Gustavo o 16 Ago 2016 ás 21:37:38

No funciona en chrome con android

29. alejandro o 29 Set 2016 ás 20:44:40

hola tendo mas de 8000 puntos en mi mapa, y en una base datos de excel, pero quiero convertir todas las coordenadas en direcciones, bueno no se si me explique.... en si quiero tener en mi excel las coordenadas con la direccion de cada una

30. FFUMERO o 31 Out 2016 ás 19:39:34

Buenas tardes es posible conectar esta api con VBA y usarlos datos en ecel, de ser posible me podrias indicar un ejemplo

gracias

31. alejo o 02 Nov 2016 ás 02:53:17

buenas noches necesitó ayuda estoy creando una pagina donde el usuario se registre con sus coordenadas y agregue el mensaje cuando el usuario ya existe.

32. Anonimo o 07 Nov 2016 ás 12:15:12

Hola!! se puede evitar por código que el navegador no pida la confirmación de acceso ?

33. Luis o 07 Nov 2016 ás 12:25:34

Hola Anonimo.

No, no se puede evitar la confirmacción de acceso a tu localización.

Un saludo.

34. Anónimo o 07 Nov 2016 ás 16:00:08

Luis, mil gracias por tu rápida respuesta. Estoy tratando de obtener estos datos desde un form de visual foxpro pero no se porque no me solicita el pedido de confirmación y la pagina por afuera corre perfectamente. Tenes alguna idea de por que será ?

Saludos

35. Lucas o 17 Nov 2016 ás 00:18:09

Hola que campo o como podria hacer para guardar la ubicacion del usuario en una variable ?

36. Lucas o 17 Nov 2016 ás 00:18:10

Hola que campo o como podria hacer para guardar la ubicacion del usuario en una variable ?

37. Danilo Castro o 17 Nov 2016 ás 19:26:40

hola me pude ayudar yo puedo conseguir las coordenadas con arduino y el modulo gps pero necesito que esas coordenadas vayan a una app en android y abra un mapa y me de la ubicacion gecias su ayuda

38. Anónimo o 06 Dec 2016 ás 10:46:36

Hola, tengo un sitio web ecommerce. Como podria saber la ubicacion de mi cliente en google map? Es posible crear en mi sitio web un boton de confirmacion de acceso a su ubicacion??

39. Anónimo o 12 Xan 2017 ás 17:27:11

Saludos. Por que no funciona en Chrome 55?

40. Anónimo o 24 Xan 2017 ás 01:26:03

Funcionaba bien y de pronto dejó de funciona en TODO excepto en Mozilla ¿saben que ha pasado? gracias

41. Luis o 24 Xan 2017 ás 08:47:55

Desde la versión 50 de Chrome, la geolocalización sólo está disponible para sitios con HTTPS.

42. JORGE ANTICOI o 26 Xan 2017 ás 15:04:48

se puede hacer que solo reciba datos de otra api , como ejemplo patente altitud y longitud???

es necesario tener un server rest json

43. JORGE ANTICOI o 26 Xan 2017 ás 15:08:01

se puede hacer que solo reciba datos de otra api , como ejemplo patente altitud y longitud???

es necesario tener un server api rest json para recibir esas variables??? , saludos muy buen sitio

44. David o 02 Mai 2017 ás 17:20:12

Hola yo quiero saber si se puede hacer lo siguiente: Cuando un usuario entra en mi pagina, esta detecta su ubicacion y dependiendo de su ubicacion que se le abra una pagina u otra.

Gracias.

45. Anónimo o 24 Mai 2017 ás 04:30:19

Hola amigo, yo quisiera saber como se puede observar en el mismo mapa un marker con mi ubicación actual y otros marcadores fijos. Que se necesita para lograr eso amigo?

46. Anónimo o 06 Xuñ 2017 ás 22:16:51

Gracias maestro exelente

47. Corina o 05 Xul 2017 ás 17:37:40

Hola por favor me podrías orientar. Estoy desarrollando una App con Geoposicionamiento utilizando html5 y con el método wath y las variables:

enableHighAccuracy: TRUE

maximumAge: 0

timeout: 12000

Estando en una ciudad grande con un celular Samsung S7 Edge, con 4G buena senal sin Wiffi, tenemos algunas mediciones buenas de menos de 20 metros de accuracy pero también nos pasa que a veces estamos obteniendo solamente 4 lecturas idénticas con un accuracy de 600 metros.

Nos gustaría saber tu opinión y si podemos utilizar algún otro parámetro que mejore esto. También tenemos la duda si conviene utilizar WATCH o GET.

Desde ya gracias.

Corina (cmerli@axonconsultores.com.ar)

48. Oniel o 30 Xul 2017 ás 04:54:08

que tal alguien me puede ayudar diciendo me q si al momento de publicar mi aplicación q usa las api de google para nacionalización debe ser publicada en un puerto seguro para q funciones la nacionalización, muchas gracias.

49. angel32 o 30 Set 2017 ás 15:42:51

hola estoy tratando de usar API DE GEOLOCALIZACIÓN y cuando lo ejecuto con mi celular me da el error

PERMISSION_DENIED no se como poder solucionarlo.gracias

50. oskar o 29 Out 2017 ás 06:15:37

como mostara las ubicacines , saldrán remarcadas en un punto como google maps

o solo los numeros'

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?