본문 바로가기
프로그래밍/API

웹 사용자 위치 API (Geolocation API)

by 밍구몬 2019. 10. 29.

Geolocation API

 

HTML5의 Geolocation는 사용자의 위치를 위도와 경도로 얻을 수 있는 API다.

Geolocation API는 사용자의 권한을 요청한 뒤 수락할 경우 사용자의 위치 정보를 얻을 수 있다.

 

우선 브라우저가 Geolocation을 사용 가능한지 확인하기 위해서는 아래의 방법을 이용한다.

<script>
	$(document).ready(function(){
		
		if ("geolocation" in navigator) {	/* geolocation 사용 가능 */
			
		} else {	/* geolocation 사용 불가능 */
			alert('geolocation 사용 불가능');
		}
		
	});
</script>

 

그 다음 사용자의 현재 위치를 가져오기 위해서 getCurrentPosition를 사용한다.

getCurrentPosition는 성공 콜백, 오류 콜백, 위치 옵션 세 가지의 매개 변수를 받는다. (오류 콜백, 위치 옵션은 생략 가능)

 

성공 콜백

사용자가 위치 정보 공유를 수락한 뒤 위치 데이터를 성공적으로 가져 왔을 경우 호출 된다.

성공 콜백함수의 데이터는 위치 데이터가 검색되는 시간을 나타내는 속성 timestamp와 위치 정보가 들어 있는 coords 객체가 들어있다.

coords 객체에는 위도(Latitude) , 경도(longitude ), 정확도(Accuracy), 고도(Altitude),  고도 정확도(AltitudeAccuracy), 방향(Heading), 속도(Speed) 데이터가 들어있다.

  • 정확도 : 위도 및 경도 좌표의 정확도 수준 (미터)
  • 고도 : 위치의 높이
  • 고도 정확도 : 고도 위치의 정확도
  • 방향 : 360도 방향 정보
  • 속도 : 초당 미터로 상대 속도를 나타냄

오류 콜백 함수 (생략 가능)

오류 콜백 함수는 다음 상황 중 호출된다.

  • 알수없는 오류
  • 요청 시간 초과
  • 사용자가 위치 정보 공유를 거부
  • 위치 정보 자체를 사용할 수 없음

위치 옵션

  • enableHighAccuracy : true, false 값으로 설정하며 true면 가장 정확한 위치를 제공(응답시간이 느려지고 전력 소비가 높아질 수 있음)하고, false일 경우 덜 정확한 위치를 얻는다.(기본값은 false)
  • timeout : 위치 데이터로 응답하는데 걸리는 최대 시간을 밀리초로 나타낸다.(기본값은 무한대)
  • maximumAge : 위치 데이터의 캐시데이터 보관 시간을 밀리초 단위로 나타냄

예제 소스

<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<h1>위도 : <span id="latitude"></span></h1>
	<h1>경도 : <span id="longitude"></span></h1>
	
	
<script>
	$(document).ready(function(){
		
		if ("geolocation" in navigator) {	/* geolocation 사용 가능 */
			navigator.geolocation.getCurrentPosition(function(data) {
			
				var latitude = data.coords.latitude;
				var longitude = data.coords.longitude;
				
				$('#latitude').text(latitude);
				$('#longitude').text(longitude);
			}, function(error) {
				alert(error);
			}, {
				enableHighAccuracy: true,
				timeout: Infinity,
				maximumAge: 0
			});
		} else {	/* geolocation 사용 불가능 */
			alert('geolocation 사용 불가능');
		}
		
	});
</script>
</body>