Geolocation API를 사용하는 간단한 경로 측정기

Michael Mahemoff

소개

사용자의 동의가 있는 경우 Geolocation API를 사용하여 사용자의 위치를 파악하고 사용자의 이동을 계속 추적할 수 있습니다. 이 기능은 목적지 길 안내 등의 목적으로 사용자 쿼리의 일부로 사용할 수 있습니다. 또한 사용자가 만든 일부 콘텐츠에 '위치정보 태그 지정'(예: 사진이 촬영된 장소 표시)에 사용될 수도 있습니다. API는 기기에 구속되지 않습니다. 클라이언트가 표준 방식으로 위치 데이터를 요청하고 받을 수 있는 한 브라우저에서 위치를 확인하는 방법은 상관없습니다. 기본 메커니즘은 GPS, Wi-Fi를 사용하거나 사용자에게 위치를 직접 입력하도록 요청하는 것입니다. 이러한 조회는 모두 시간이 걸리므로 API는 비동기식이므로 위치를 요청할 때마다 콜백 메서드를 전달합니다.

다음 예는 초기 위치를 표시하고 페이지가 로드된 이후 이동한 거리를 표시하는 이동 미터입니다.

1단계: 호환성 확인

위치정보 객체의 존재 여부를 테스트하여 호환성을 쉽게 확인할 수 있습니다.

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

2단계: 이동 측정기 HTML 선언

이 예에서는 이동 미터를 만들고 있으므로 다음 HTML을 선언합니다.

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

다음 몇 단계에서는 Geolocation API를 사용하여 빈 스팬을 모두 채웁니다.

3단계: 사용자의 현재 위치 확인

getCurrentPosition()는 사용자의 현재 위치를 비동기식으로 보고합니다. 페이지가 로드되는 즉시 호출되어 시작 위치가 올바르게 채워지고 나중을 위해 저장되도록 합니다.

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

이 도메인의 애플리케이션이 처음으로 권한을 요청한 경우 브라우저는 일반적으로 사용자 동의를 확인합니다. 브라우저에 따라 항상 권한 조회를 허용하거나 허용하지 않는 환경설정이 있을 수도 있으며, 이 경우 확인 프로세스가 우회됩니다.

이 코드를 실행하면 이제 시작 위치를 볼 수 있습니다. 브라우저에서 사용하는 위치 기기에 따라 위치 객체에는 실제로 위도와 경도 외에도 많은 것이 포함될 수 있습니다. 예를 들어 고도나 방향이 포함될 수 있습니다. 위치 변수를 콘솔에 로깅하여 더 자세히 살펴볼 수 있습니다.

4단계: 오류 처리

안타깝게도 모든 위치 조회가 성공하는 것은 아닙니다. GPS를 찾을 수 없었거나 사용자가 갑자기 위치 조회를 비활성화했을 수 있습니다. 오류가 발생하면 getCurrentPosition()의 두 번째 인수(선택사항)가 호출되므로 콜백 내에서 사용자에게 알릴 수 있습니다.

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

5단계: 사용자 위치 모니터링

이전 getCurrentPosition() 호출은 페이지 로드 시 한 번만 실행되었습니다. 변경사항을 추적하려면 watchPosition()를 사용하세요. 사용자가 움직일 때마다 자동으로 콜백 함수에 알립니다.

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

6단계: 이동 거리 표시

이 단계는 Geolocation API와 직접적인 관련이 없지만 데모를 마무리하고 위치 데이터를 사용하는 방법의 예를 제공합니다. 이동 거리를 채우는 추가 줄을 watchPosition() 핸들러에 추가합니다.

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

calculateDistance() 함수는 기하학적 알고리즘을 실행하여 두 좌표 간의 거리를 확인합니다. 자바스크립트 구현은 크리에이티브 커먼즈 라이선스에 따라 이동 가능 유형에서 제공한 스크립트를 토대로 한 것입니다.

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}