Implementar un rastreador de distancia usando geolocalización HTML5

La geolocalización HTML5 se utiliza para localizar la ubicación del usuario. Entonces, ¿cómo implementar un rastreador de distancia? Mi idea es esta. La premisa es que el navegador admite la geolocalización h5. Sobre esta base, se obtiene la ubicación del usuario, se actualiza la ubicación del usuario, se calcula la distancia y se muestra en la página. Simplemente implementado para que sea más claro para los usuarios. Puede ver la ubicación actual directamente, que está conectada a Baidu Map API.

La estructura de la página es la siguiente:

 <div id=container> <section> <article> <header> <h1>Su ubicación</h1> </header> <p class=info id=status>Su navegador no admite geolocalización HTML5. </p> <div class=geostatus> <p id=latitude>Latitud: </p> <p id=longitude>Longitud: </p> <p id=accuracy>Precisión: </p> <p id = marca de tiempo>Marca de tiempo: </p> <p id=currDist>Distancia de viaje actual: </p> <p id=totalDist>Distancia de viaje total: </p> </div> </article> </section> <!-- Visualización de ubicación en el mapa de Baidu--> <div id=allmap></div> </div>

Determinar si el navegador admite la geolocalización HTML5

El método loadDemo() se llama cuando se carga el cuerpo. El método determina si el navegador admite la geolocalización HTML5 en función de navigator.geolocation; si navigator.geolocation es verdadero, entonces podemos comenzar a obtener y actualizar la ubicación del usuario.

HTML5 puede obtener la posición del usuario mediante el método getCurrentPosition(). Pero esto solo se obtiene una vez, por lo que elegimos el método watchPosition(), que puede devolver la posición actual del usuario y continuar devolviendo la posición actualizada cuando el usuario se mueve (como el GPS de un automóvil).

 navigator.geolocation.watchPosition(updateLocation, handleLocationError, {tiempo de espera: 10000});

Mientras se obtiene continuamente la ubicación, se llama al método updateLocation para mostrar la ubicación en la página. Por supuesto, también se llama al método de cálculo de distancia para obtener la distancia y la ubicación en el mapa de Baidu se actualiza constantemente.

 var latitud = posición.coords.latitude;var longitud = posición.coords.longitude;var precisión = posición.coords.accuracy;var marca de tiempo = posición.timestamp;document.getElementById(latitud).innerHTML = latitud: + latitud;documento. getElementById(longitud).innerHTML = longitud: + longitude;document.getElementById(accuracy).innerHTML = precision: + precision;document.getElementById(timestamp).innerHTML = timestamp: + timestamp;if(accuracy >= 30000) { updateStatus(Necesita valores más precisos para calcular la distancia. ); retorno;}if((últimoLat!= nulo) && (últimoLargo!= nulo)) { var currentDistance = distancia(latitud, longitud, lastLat, lastLong); document.getElementById(currDist).innerHTML = Distancia de viaje actual: + currentDistance.toFixed(2) + km; totalDistance += currentDistance; internalHTML = distancia total recorrida: + currentDistance.toFixed(2) + km; updateStatus(Ubicación) actualizado correctamente.);}lastLat = latitud;lastLong = longitud;

Coloque la longitud y latitud de la posición inicial y la posición actual en la función como parámetros y calcule la distancia (unidad: km) mediante la conversión.

 Number.prototype.toRadians = function() { return this * Math.PI / 180; }función distancia(latitud1, longitud1, latitud2, longitud2) { var R = 6371; var deltaLatitude = (latitud2 - latitud1).toRadians(); var deltaLongitude = (longitud2 - longitud1).toRadianes(); latitud1 = latitud1.toRadians(), latitud2 = latitud2.toRadians(); var a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * Math .sin(deltaLongitud / 2) * Math.sin(deltaLongitud / 2 var c =); 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

Para utilizar Baidu Map API, debe registrar una cuenta de Baidu, solicitar convertirse en desarrollador de Baidu y obtener una clave para utilizar los servicios relacionados. Según la documentación, puede saber cómo utilizar esta API.

 var map = new BMap.Map(allmap); //Crear una instancia de mapa map.centerAndZoom(new BMap.Point(longitude, latitude), 14 //Establecer las coordenadas del punto central y el nivel del mapa map.addControl(new BMap); .MapTypeControl ()); //Agregar control de tipo de mapa map.setCurrentCity(Nanchang); //Muestra la ciudad, este elemento debe configurarse map.enableScrollWheelZoom(true); //Habilitar zoom con la rueda del mouse//La siguiente es la configuración de la etiqueta de ubicación actual var point = new BMap.Point(longitude, latitude map.centerAndZoom); (punto, 14); var marcador = new BMap.Marker(punto); //Crea un marcador map.addOverlay(marcador); //Agregar marcadores al mapa Marker.setAnimation(BMAP_ANIMATION_BOUNCE); //Animación de rebote//Función API del mapa Baidu--------fin

 <tipo de script=text/javascript src=http://api.map.baidu.com/api?v=2.0&ak=tu clave></script>

Lo anterior es la introducción del editor al uso de la geolocalización HTML5 para implementar un rastreador de distancia. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!