HTML5 지리적 위치(Geolocation) API란?
HTML5의 Geolocation API를 사용하면 사용자가 웹사이트에 자신의 위치 정보를 공유할 수 있습니다. 자바스크립트(JavaScript)로 위도(latitude)와 경도(longitude) 값을 받아 백엔드 웹 서버로 전송하면, 주변 업체 검색이나 지도에 현재 위치 표시하기 같은 위치 기반 기능을 구현할 수 있습니다. Geolocation 좌표는 해당 기기의 지리적 위치를 나타냅니다.
위치 정보 조회 방식
getCurrentPosition()과 watchPosition() 메서드는 위치 정보를 가져오는 콜백 함수를 지정합니다. 두 메서드 모두 비동기(asynchronous) 방식으로 호출되며, 완전한 위치 정보를 담고 있는 Position 객체를 콜백으로 전달합니다.
Position 객체는 기기의 현재 지리적 위치를 나타냅니다. 위치는 지리적 좌표 집합과 더불어 진행 방향(heading)과 속도(speed) 정보로 함께 표현됩니다.
Position 객체의 주요 속성
| 속성 | 타입 | 설명 |
|---|---|---|
| coords | objects | 기기의 지리적 위치를 지정합니다. 위치는 지리적 좌표 집합과 함께 진행 방향 및 속도 정보로 표현됩니다. |
| coords.latitude | Number | 십진수 도(degree) 단위의 위도 추정값입니다. 값 범위는 [-90.00, +90.00]입니다. |
| coords.longitude | Number | 십진수 도 단위의 경도 추정값입니다. 값 범위는 [-180.00, +180.00]입니다. |
다음은 Position 객체에서 위도와 경도 좌표를 활용하는 예시입니다.
Geolocation 객체의 메서드
Geolocation 객체는 좌표를 사용해 위치를 조회하는 다음 메서드들을 제공합니다.
| 메서드 | 설명 |
|---|---|
| getCurrentPosition() | 사용자의 현재 지리적 위치를 한 번 조회합니다. |
| watchPosition() | 기기의 현재 지리적 위치에 대한 주기적인 업데이트를 계속 받아옵니다. |
| clearWatch() | 진행 중인 watchPosition() 호출을 취소합니다. |
실전 예제 코드
아래 코드를 실행하면 HTML5에서 Geolocation을 다루고 좌표를 활용하는 방법을 직접 확인할 수 있습니다. 이 예제는 watchPosition()을 사용해 기기의 현재 위치에 대한 주기적 업데이트를 받아오며, 위치는 좌표 집합과 함께 진행 방향과 속도 정보로 표현됩니다.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var watchID;
var geoLoc;
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("Latitude : " + latitude + " Longitude: " + longitude);
}
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
} else if(err.code == 2) {
alert("Error: Position is unavailable!");
}
}
function getLocationUpdate(){
if(navigator.geolocation){
// timeout at 60000 milliseconds (60 seconds)
var options = {timeout:60000};
geoLoc = navigator.geolocation;
watchID = geoLoc.watchPosition(showLocation, errorHandler, options);
} else{
alert("Sorry, browser does not support geolocation!");
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="getLocationUpdate();" value="Watch Update"/>
</form>
</body>
</html>참고 사항
브라우저는 보안상의 이유로 HTTPS 환경에서만 Geolocation API를 허용하며, 사용자가 권한 요청을 명시적으로 승인해야 위치 정보에 접근할 수 있습니다. 또한 에러 코드 0(알 수 없는 오류), 1(권한 거부), 2(위치 확인 불가), 3(시간 초과)을 구분해 처리하면 더욱 안정적인 위치 기반 기능을 만들 수 있습니다.