Código de JavaScript - Geolocalización basada en W3C

Imágen de perfil

Geolocalización basada en W3Cgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Actualizado el 19 de Enero del 2015 por txema (Creado el 17 de Enero del 2015)
2.454 visualizaciones desde el 17 de Enero del 2015. Una media de 28 por semana
La geolocalización es un aspecto de interés generalizado en el mundo web.

W3C, ocupa todo un equipo en su seguimiento y desarrollo.

El código que se presenta, pretende facilitar al webmaster el acceso de la programación básica y completa para sus desarrollos de aplicaciones de diferente orden.
Considero suficientemente comentadas las funciones en el código Javascript.

Lo que se ofrece son datos, sin necesidad de mapas ni soporte externo. Cada cual es libre de adaptarlos a diferentes tipos de mapas (OMS, Google Maps, u otros) .

No obstante, W3C comunica a través de su página http://dev.w3.org/geo/api/spec-source.html las últimas ediciones con acceso en cabecera a las últimas versiones, editores, etc.

Si bien se editan semestralmente nuevas versiones, cualquier noticia sobre modificación, mejora o implementación nueva que aparezca será muy bien recibida por mí

Requerimientos

Surge con el desarrollo de HTML5 pudiendo funcionar con XHTML o versiones anteriores.

El código base surge desde Javascript, mostrando los datos en HTML5

API-20131024

Actualizado el 18 de Enero del 2015 (Creado el 17 de Enero del 2015)gráfica de visualizaciones de la versión: API-20131024
360 visualizaciones desde el 17 de Enero del 2015. Una media de 7 por semana

API-20131024-1
estrellaestrellaestrellaestrellaestrella(5)

Actualizado el 20 de Enero del 2015 (Creado el 19 de Enero del 2015)gráfica de visualizaciones de la versión: API-20131024-1
2.095 visualizaciones desde el 19 de Enero del 2015. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Se añade una modificación (buenas prácticas sobre la llamada a enableHighAccurace en el orden de llamada)

Y un dato nuevo obtenido: altitudeAccuracy. Sobre superficie, el dato generalmente es 0, no pudiendo ser nunca negativo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Geolocalización basada en W3C">
    <title>Geolocalización basada en W3C</title>
<script>
//<![CDATA[
var watchId;
// Controlamos los tiempos de espera mínimo y máximo de nuestra geolocalización respecto a la petición anterior
var PositionOptions = {
    enableHighAccurace: true, // busca el mejor dispositivo de geolocalización (GPS, tiangulación, ...)
    timeout: 5000,
    maximumAge: 60000
};
// initiate_geolocation() utiliza la geolocalalización solamente cuando se solicita.
// Con PositionOptions aseguramos que la posición no corresponde a caché 
function initiate_geolocation() {
  if (navigator.geolocation) {
    // Boleano, Para optimizarlo en los navegadores (mis dudas con IE)
    browserSupportFlag = true;
    var watchId = navigator.geolocation.getCurrentPosition(successCallback, errorCallback, PositionOptions);
  } else {
    document.getElementById("mensaje").innerHTML = "Lo sentimos pero el API de Geolocalización de HTM5 no está disponible para su navegador";
  }
}
// Reitera la geolocalización hasta que la detenemos con clear_watch_geolocation()
function watch_geolocation() {
  if (navigator.geolocation) {
    // Boleano, Para optimizarlo en los navegadores (mis dudas con IE)
    browserSupportFlag = true;
    var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, PositionOptions);
  } else {
    document.getElementById("mensaje").innerHTML = "Lo sentimos pero el API de Geolocalización de HTM5 no está disponible para su navegador";
  }
}
/* Detenemos la geolocalización reiterada */
function clear_watch_geolocation() {
  if (navigator.geolocation) {
    navigator.geolocation.clearWatch(watchId);
  } else {
    document.getElementById("mensaje").innerHTML = "Lo sentimos pero el API de Geolocalización de HTM5 no está disponible para su navegador";
  }
}
 
function successCallback(pos) {
  var timestamp = document.getElementById('timestamp');
  var date = new Date(pos.timestamp);
  // Hacemos legible la fecha a nuestro léxico. 
  // timestamp nos daría una lectura como ésta: Sat Jan 17 2015 18:47:52 GMT+0100
  var mes = date.getMonth() + 1;
  if (mes < 10) {
    mes = "0" + mes
  }
  var dia = date.getDate();
  if (dia < 10) {
    dia = "0" + dia
  }
  var anyo = date.getFullYear();
  var hora = date.getHours();
  if (hora < 10) {
    hora = "0" + hora
  }
  var minuto = date.getMinutes();
  if (minuto < 10) {
    minuto = "0" + minuto
  }
  var segundo = date.getSeconds();
  if (segundo < 10) {
    segundo = "0" + segundo
  }
  var timestamp = document.getElementById('timestamp');
  timestamp.innerHTML = dia + "/" + mes + "/" + anyo + ", " + hora + ":" + minuto + ":" + segundo;
  var latitude = document.getElementById('latitude');
  // con toFixed(6) limito decimales a 6 
  latitude.innerHTML = pos.coords.latitude.toFixed(6);
  var longitude = document.getElementById('longitude');
  longitude.innerHTML = pos.coords.longitude.toFixed(6);
  // La altitud sobre la superficie. Solo será medible desde avión, paramente ... o será 0  
  var altitude = document.getElementById('altitude');
  altitude.innerHTML = pos.coords.altitude.toFixed(6);
  // accuracy considera el diámetro máximo de error. Muchos lo dividen por 2 ya que sería el radio máximo de error.
  var accuracy = document.getElementById('rangoerror');
  accuracy.innerHTML = pos.coords.accuracy;
  // accuracy considera el diámetro máximo de error. Muchos lo dividen por 2 ya que sería el radio máximo de error.
  var altitudeAccuracy = document.getElementById('rangoerrorAltitud');
  altitudeAccuracy.innerHTML = pos.coords.altitudeAccuracy;
  // Sentido y velocidad si la medición se hace desde un dispositivo en movimiento
  // 0 => Norte en sentido agujas del reloj hasta 360º
  var heading = document.getElementById('sentido');
  heading.innerHTML = pos.coords.heading;
  // metros/segundo si se detecta movimiento
  var speed = document.getElementById('velocidad');
  speed.innerHTML = pos.coords.speed;
};
/* Posibles errores que se pueden producir en la geolocalización */
function errorCallback(error) {
  var appErrMessage = null;
  if (error.core == error.PERMISSION_DENIED) {
    appErrMessage = "El usuario no ha concedido los privilegios de geolocalización"
  } else if (error.core == error.POSITION_UNAVAILABLE) {
    appErrMessage = "Posición no disponible"
  } else if (error.core == error.TIMEOUT) {
    appErrMessage = "Demasiado tiempo intentando obtener la localización del usuario."
  } else if (error.core == error.UNKNOWN) {
    appErrMessage = "Error desconocido"
  } else {
    appErrMessage = "Error insesperado"
  }
  document.getElementById("mensaje").innerHTML = appErrMessage
};
//]]>
</script>
  </head>
  <body>
    <section style="text-align:center;">
	<button type="button" class="button" onclick="initiate_geolocation();">Ver mi posición ahora</button>
    <br>
	<button type="button" class="button" onclick="watch_geolocation();">Monitorizar mi posición</button>
	<br>
	<button type="button" class="button" onclick="clear_watch_geolocation();">Finalizar monitorización</button>
	<br>
	Fecha: <span style="color:#FF00AA;" id="timestamp"></span>
	<br>
	Latitud: <span style="color:#FF00AA;" id="latitude"></span>
	<br>
	Longitud: <span style="color:#FF00AA;" id="longitude"></span>
	<br>
	Altitud: <span style="color:#FF00AA;" id="altitude"></span> (Sobre nivel suelo: parapente, avión, ...)
	<br>
	Error máximo de geolocalización: <span style="color:#FF00AA;" id="rangoerror"></span> metros.
	<br>
	Error máximo de Altitud: <span style="color:#FF00AA;" id="rangoerrorAltitud"></span> metros.
	<br>
	Dirección (0 => Norte en sentido agujas del reloj hasta 360º): <span style="color:#FF00AA;" id="sentido"></span>
	<br>
	Velocidad (metros/segundo si se detecta movimiento): <span style="color:#FF00AA;" id="velocidad"></span>
	<br>
    <div id="mensaje" style="color:#FF0000;"></div>
	</section>
  </body>
</html>



Comentarios sobre la versión: API-20131024-1 (5)

Imágen de perfil
xve
18 de Noviembre del 2015
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Xavier
18 de Noviembre del 2015
estrellaestrellaestrellaestrellaestrella
Como se podrían enviar los resultados de la geolocalizacion a un Excel?
Responder
Alfredo
19 de Noviembre del 2015
estrellaestrellaestrellaestrellaestrella
Podrías enviar la data al servidor y en servidor generar el archivo y se lo envias al explorador para que lo descargue
Responder
Jasiel
13 de Marzo del 2016
estrellaestrellaestrellaestrellaestrella
Una pregunta, y si no tiene activo el gps, podría activarlo por medio de código???
Responder
Imágen de perfil
txema
15 de Marzo del 2016
estrellaestrellaestrellaestrellaestrella
La sentencia
enableHighAccurace: true, // busca el mejor dispositivo de geolocalización (GPS, tiangulación, ...)
te lo dice todo.

WiFi, triangulación.
En PC conectada por cable el error de geolocalización puede ser muy importante.
Responder

Comentar la versión: API-20131024-1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3007