Implemente um rastreador de distância usando geolocalização HTML5

A geolocalização HTML5 é usada para localizar a localização do usuário. Então, como implementar um rastreador de distância? Minha ideia é esta. A premissa é que o navegador suporte a geolocalização h5. Com base nisso, a localização do usuário é obtida, a localização do usuário é calculada e a distância é exibida na página. simplesmente implementado para torná-lo mais claro para os usuários. Você pode ver a localização atual diretamente, que está conectada à API do mapa do Baidu.

A estrutura da página é a seguinte:

 <div id=container> <section> <article> <header> <h1>Sua localização</h1> </header> <p class=info id=status>Seu navegador não suporta geolocalização HTML5. </p> <div class=geostatus> <p id=latitude>Latitude: </p> <p id=longitude>Longitude: </p> <p id=accuracy>Precisão: </p> <p id = timestamp>Timestamp: </p> <p id=currDist>Distância atual da viagem: </p> <p id=totalDist>Distância total da viagem: </p> </div> </article> </section> <!-- Exibição de localização no mapa do Baidu--> <div id=allmap></div> </div>

Determine se o navegador suporta geolocalização HTML5

O método loadDemo() é chamado quando o corpo é carregado. O método determina se o navegador suporta geolocalização HTML5 com base em navigator.geolocation se navigator.geolocation for verdadeiro, então podemos começar a obter e atualizar a localização do usuário.

HTML5 pode obter a posição do usuário através do método getCurrentPosition(). Mas isso só é obtido uma vez, então escolhemos o método watchPosition(), que pode retornar a posição atual do usuário e continuar retornando a posição atualizada quando o usuário se move (assim como o GPS de um carro).

 navigator.geolocation.watchPosition(updateLocation, handleLocationError, { tempo limite: 10000 });

Ao obter continuamente a localização, o método updateLocation é chamado para exibir a localização na página. É claro que o método de cálculo de distância também é chamado para obter a distância, e a localização no mapa do Baidu é constantemente atualizada.

 var latitude = posição.coords.latitude;var longitude = posição.coords.longitude;var precisão = posição.coords.accuracy;var timestamp = posição.timestamp;document.getElementById(latitude).innerHTML = latitude: + latitude;documento. getElementById(longitude).innerHTML = longitude: + longitude;document.getElementById(accuracy).innerHTML = precisão: + precisão;document.getElementById(timestamp).innerHTML = timestamp: + timestamp;if(accuracy >= 30000) { updateStatus(Precisa de valores mais precisos para calcular a distância. ); return;}if((lastLat != null) && (lastLong != null)) { var currentDistance = distância (latitude, longitude, lastLat, lastLong); document.getElementById(currDist).innerHTML = Distância atual da viagem: + currentDistance.toFixed(2) + totalDistance += document.getElementById(totalDist). innerHTML = distância total percorrida: + currentDistance.toFixed(2) + km updateStatus(Location; atualizado com sucesso.);}lastLat = latitude;lastLong = longitude;

Coloque a longitude e a latitude da posição inicial e a posição atual na função como parâmetros e calcule a distância (unidade: km) por meio de conversão

 Number.prototype.toRadians = function() { return this * Math.PI / 180; } function distância (latitude1, longitude1, latitude2, longitude2) { var R = 6371 var deltaLatitude = (latitude2 - latitude1).toRadians(); var deltaLongitude = (longitude2 - longitude1).toRadians(); latitude1.toRadians(), latitude2 = latitude2.toRadians(); var a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * Matemática .sin(deltaLongitude / 2) * Math.sin(deltaLongitude / 2); 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

Para usar a API do Baidu Map, você precisa registrar uma conta do Baidu, inscrever-se para se tornar um desenvolvedor do Baidu e obter uma chave para usar os serviços relacionados. De acordo com a documentação, você pode saber como usar esta API.

 var map = new BMap.Map(allmap); //Cria uma instância do mapa map.centerAndZoom(new BMap.Point(longitude, latitude), 14); //Definir as coordenadas do ponto central e o nível do mapa map.addControl(new BMap). .MapTypeControl ()); //Adicionar controle de tipo de mapa map.setCurrentCity(Nanchang); //Exibir a cidade, este item deve ser definido map.enableScrollWheelZoom(true); //Ativar o zoom da roda do mouse//A seguir está a configuração do rótulo de localização atual var point = new BMap.Point(longitude, latitude map.centerAndZoom); (ponto, 14 ); var marcador = new BMap.Marker(point); //Cria um marcador map.addOverlay(marker); //Adicionar marcadores ao mapa marker.setAnimation(BMAP_ANIMATION_BOUNCE); //Animação de salto//Função da API do mapa Baidu--------end

 <script type=text/javascript src=http://api.map.baidu.com/api?v=2.0&ak=sua chave></script>

O texto acima é a introdução do editor ao uso da geolocalização HTML5 para implementar um rastreador de distância. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!