프로그래밍/API
웹 사용자 위치 API (Geolocation API)
밍구몬
2019. 10. 29. 15:39
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>
