Nueva pregunta

Pregunta:

Fecha: 12-08-2015 23:09:46 (En Español)

[APORTE] Geolocalización de usuario (W3C)[Resuelta]

Adjunto se muestra el código que permite ver la localización de usuario basada en Geolocation API W3C

Y no, no forma parte de Google Maps u OSM (aunque permitan integrarla), ni es parte de HTML5.

(El código va suficientemente comentado).

<!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";
  }
}
// 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";
  }
}
/* 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);
  // 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>


Una curiosa (molesta) aclaración: Google Chrome no recoge altitud, error de altitud, velocidad ni dirección.
Sí lo hacen Edge, Internet explorer, Firefox, Opera o Safari)

Es por ello que en la muestra sobre mapa (ver geolocalización sobre mapa) no se recogen dichos parámetros.

Etiquetas: Aporte - Geolocalización - W3C Votos: 5 - Respuestas: 4 - Vistas: 26 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 13-08-2015 13:54:03 muy interesante
    muchas gracias por compartirlo

    Hay alguna manera de indicarle con variables un domicilio y ciudad y lo ubique en el mapa?

    por ej
    $ciudad="Buenos Aires";
    $direccion="Balcarce 50";

    saludos
      Votos: 1 - Link respuesta
     
  • Fecha: 13-08-2015 17:50:35 Hola Walter:

    Si, la hay, pero ya no por Geolocalización basada en W3C sino mediante Geocoding de Google Maps (Geocodificación simple -a partir de dirección- o Geocodificación inversa - a partir de coordenadas-)
    Existen otras fuentes de datos, tanto por la línea de OSM (OpenStreetMap) como por Yahoo Maps, Bing Maps, etc. Pero las bases de datos de que disponen están muy lejos de llegar a lo que ofrece Google Maps.

    El inconveniente es que Google Maps ofrece el servicio reclamando que se muestre en el mapa correspondiente (es lo que mostraba en el enlace al final de mi primera entrada y que nos lleva a partir de las coordenadas a la dirección correspondiente).

    Es preciso aclarar que el código expuesto funciona muy bien en conexiones de móviles o tablets con GPS (siempre recomendable en exteriores o libres de interferencias propias de construcciones) o mediante triangulación de señal (conexión inalámbrica o WIFI). Desde un ordenador de mesa conectado mediante cable, generalmente nos lleva a la antena desde la que recibimos la señal.

    En el ejemplo que pones: Si nos encontramos en las coordenadas -34.608306 , -58.371027 Google Maps nos dirá que estamos en Balcarce 50, C1064AAB CABA, Argentina (muy cerca de la Casa Rosada o la Plaza de Mayo).
    Si le pedimos que nos indique Balcarce 50, Buenos Aires, nos llevará al mismo punto.
    OJO: Si pones solamente Balcarce 50 te envía a Balcarce 50, E3240BAB Villaguay, Entre Ríos, Argentina porque es la primera dirección que encuentra.

    Puedes probar la Geocodificación simple o inversa (indistintamente, mediante coordenadas o dirección que pueda interpretar Google Maps) en este mapa.

    Explicar el código de geocodificación para representarlo requiere una base de conocimientos previa sobre la API de Google Maps.

    Saludos
      Votos: 1 - Link respuesta
     
  • Fecha: 16-08-2015 17:42:21 Artzain Haritz:
    Como siempre, sacando conejos de la viejas galera ...
    Muchas gracias por el código
      Votos: 0 - Link respuesta
     
  • Fecha: 16-08-2015 23:15:53 Le había pedido a Fernando en ¿Que tecnologías manejas? algunas etiquetas, así que no podía menos que abrir el fuego con los códigos madre (o padre) de las criaturas.

    Saludos.
      Votos: 1 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión