HTML5 Geolocation을 사용하여 거리 추적기 구현

HTML5 Geolocation은 사용자의 위치를 ​​찾는 데 사용됩니다. 그렇다면 거리 추적기를 구현하는 방법은 무엇입니까? 내 생각은 브라우저가 h5 위치 정보를 지원한다는 것입니다. 이를 기반으로 사용자의 위치가 업데이트되고 거리가 계산되어 페이지에 표시됩니다. Baidu Map API와 연결되어 현재 위치를 직접 확인할 수 있습니다.

페이지 구조는 다음과 같습니다.

 <div id=container> <section> <article> <header> <h1>현재 위치</h1> </header> <p class=info id=status>귀하의 브라우저는 HTML5 Geolocation을 지원하지 않습니다. </p> <div class=geostatus> <p id=latitude>위도: </p> <p id=longitude>경도: </p> <p id=accuracy>정확도: </p> <p id = timestamp>타임스탬프: </p> <p id=currDist>현재 이동 거리: </p> <p id=totalDist>총 이동 거리: </p> </div> </article> </section> <!-- Baidu 지도 위치 표시--> <div id=allmap></div> </div>

브라우저가 HTML5 위치정보를 지원하는지 확인

loadDemo() 메서드는 본문이 로드될 때 호출됩니다. 이 메서드는 navigator.geolocation을 기반으로 브라우저가 HTML5 Geolocation을 지원하는지 여부를 결정합니다. navigator.geolocation이 true이면 사용자 위치를 얻고 업데이트할 수 있습니다.

HTML5에서는 getCurrentPosition() 메서드를 통해 사용자의 위치를 ​​얻을 수 있습니다. 그러나 이는 한 번만 획득되므로 사용자의 현재 위치를 반환하고 사용자가 움직일 때 업데이트된 위치를 계속 반환할 수 있는 watchPosition() 메서드를 선택했습니다(자동차의 GPS와 마찬가지로).

 navigator.geolocation.watchPosition(updateLocation, handlerLocationError, { timeout: 10000 });

지속적으로 위치를 획득하는 동안 updateLocation 메소드를 호출하여 페이지에 위치를 표시합니다. 물론 거리 계산 메소드도 호출하여 거리를 획득하며, 바이두 지도의 위치는 지속적으로 업데이트됩니다.

 var 위도 = position.coords.latitude;var 경도 = position.coords.longitude;var 정확도 = position.coords.accuracy;var 타임스탬프 = position.timestamp;document.getElementById(latitude).innerHTML = 위도: + 위도;문서. getElementById(경도).innerHTML = 경도: + 경도;document.getElementById(accuracy).innerHTML = 정확도: + Accument.getElementById(timestamp).innerHTML = timestamp: + timestamp;if(accuracy >= 30000) { updateStatus(거리를 계산하려면 더 정확한 값이 필요합니다. ); return;}if((lastLat != null) && (lastLong != null)) { var currentDistance = distance(latitude, longitude, lastLat, lastLong); document.getElementById(currDist).innerHTML = 현재 이동 거리: + currentDistance.toFixed(2) + km; totalDistance += currentDistance; innerHTML = 총 이동 거리: + currentDistance.toFixed(2) + updateStatus(Location; 성공적으로 업데이트되었습니다.);}lastLat = 위도;lastLong = 경도;

시작 위치와 현재 위치의 경도와 위도를 함수에 매개변수로 넣고, 변환을 통해 거리(단위:km)를 계산합니다.

 Number.prototype.toRadians = function() { return this * Math.PI / 180; } function distance(latitude1, longitude1, latitude2, longitude2) { var R = 6371; var deltaLatitude = (latitude2 - latitude1).toRadians(); var deltaLongitude = (경도2 - 경도1).toRadians() = latitude1.toRadians(), latitude2 = latitude2.toRadians(); var a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * 수학 .sin(deltaLongitude / 2) * Math.sin(deltaLongitude / 2) var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)) var d = R * c;

Baidu Map API를 사용하려면 Baidu 계정을 등록하고 Baidu 개발자가 되기 위해 신청해야 하며 관련 서비스를 사용할 수 있는 키를 받아야 합니다. 설명서에 따르면 이 API 사용 방법을 알 수 있습니다.

 var map = new BMap.Map(allmap); //맵 인스턴스 생성 map.centerAndZoom(new BMap.Point(longitude, latitude), 14) //중심점 좌표 및 지도 레벨 설정 map.addControl(new BMap .MapTypeControl ()); //지도 유형 제어 추가 map.setCurrentCity(Nanchang); //도시를 표시합니다. 이 항목은 설정되어야 합니다. map.enableScrollWheelZoom(true); //마우스 휠 확대/축소 활성화//다음은 현재 위치 라벨 설정입니다. var point = new BMap.Point(longitude, latitude); (point, 14 ); var marker = new BMap.Marker(point); //마커 생성 map.addOverlay(marker); //지도에 마커 추가 marker.setAnimation(BMAP_ANIMATION_BOUNCE) //바운스 애니메이션//Baidu 지도 API 함수---------end

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

위 내용은 HTML5 Geolocation을 사용하여 거리 추적기를 구현하는 방법에 대한 편집자의 소개입니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 제 시간에 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!