Código de JavaScript - Geolocalización basada en W3C con seguimiento de posición

Imágen de perfil

Geolocalización basada en W3C con seguimiento de posicióngráfica de visualizaciones


JavaScript

Publicado el 18 de Noviembre del 2015 por txema
1.219 visualizaciones desde el 18 de Noviembre del 2015. Una media de 28 por semana
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 de W3C geolocation para sus desarrollos de aplicaciones de diferente orden.
Al código ya mostrado en http://www.lawebdelprogramador.com/codigo/JavaScript/3007-Geolocalizacion-basada-en-W3C.html se añaden las tres posibilidades de seguimiento:

initiate_geolocation() utiliza la geolocalización solamente cuando se solicita.
watch_geolocation() reitera la geolocalización hasta que la detenemos con clear_watch_geolocation()
clear_watch_geolocation() detiene la geolocalización reiterada

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 a las últimas versiones, editores, etc.

Requerimientos

Desarrollo en HTML5 puede funcionar con XHTML o versiones anteriores.

El código principal es el desarrollado en Javascript,

20151118

Actualizado el 19 de Noviembre del 2015 (Creado el 18 de Noviembre del 2015)gráfica de visualizaciones de la versión: 20151118
1.220 visualizaciones desde el 18 de Noviembre del 2015. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
<!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>
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) {
    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";
  }
}
// watch_geolocation() reitera la geolocalización hasta que la detenemos con clear_watch_geolocation()
function watch_geolocation() {
  if (navigator.geolocation) {
    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";
  }
}
// clear_watch_geolocation() dettiene 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 ya que timestamp nos daría una lectura como ésta: Nov 18 2015 19:56:11 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);
  // 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;
  // 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 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>
	Error máximo de geolocalización: <span style="color:#FF00AA;" id="rangoerror"></span> metros.
	<br>
	Altitud: <span style="color:#FF00AA;" id="altitude"></span> (Sobre nivel suelo: parapente, avión, ...)
	<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: 20151118 (0)


No hay comentarios
 

Comentar la versión: 20151118

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

http://lwp-l.com/s3349