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

Michael Mahemoff
Michael Mahemoff
X 홈페이지

소개

Geolocation API를 사용하면 항상 사용자의 동의를 받아 사용자가 어디에 있는지 확인하고 이동하는 동안 계속 확인할 수 있습니다. 이 기능은 사용자 쿼리의 일부로 사용할 수 있습니다(예: 누군가를 목적지로 안내). 사용자가 만든 일부 콘텐츠에 '위치 태그'를 지정하는 데도 사용할 수 있습니다(예: 사진이 촬영된 위치 표시). 이 API는 기기와 무관합니다. 클라이언트가 표준적인 방식으로 위치 데이터를 요청하고 수신할 수 있다면 브라우저가 위치를 결정하는 방식은 중요하지 않습니다. 기본 메커니즘은 GPS, Wi-Fi를 통해서 또는 사용자에게 위치를 직접 입력하도록 요청하는 방식일 수 있습니다. 이러한 조회는 시간이 걸리므로 API는 비동기식입니다. 위치를 요청할 때마다 콜백 메서드를 전달합니다.

이 예는 초기 위치를 표시하고 페이지가 로드된 이후 이동한 거리를 계속 표시하는 주행 거리 측정기입니다.

1단계: 호환성 확인

Browser Support

  • Chrome: 5.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 5.

Source

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

// 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() 함수는 기하학적 알고리즘을 실행하여 두 좌표 간의 거리를 결정합니다. 자바스크립트 구현은 크리에이티브 커먼즈 라이선스에 따라 Moveable Type에서 제공하는 스크립트를 조정하여 가져온 것입니다.

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;
}