Geolocation
HTML5 API
HTML5에서 새롭게 추가된 API는 모두 자바스크립트로 구현되어 있습니다.
그러므로 수업의 내용을 이해하기 위해서는 자바스크립트에 대한 기초 지식이 필요합니다.
따라서 수업 내용을 따라가기가 힘들다면 자바스크립트를 공부하고 나서 다시 살펴보는 것도 좋습니다.
geolocation API
geolocation API는 사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API입니다.
사용자의 위도 및 경도에 관한 정보는 자바스크립트를 이용해 웹 서버로 전송됩니다.
이것을 이용하면 사용자의 위치를 지도에 표시하거나, 사용자 근처의 상점을 찾아주는 등의 위치기반 서비스를 할 수 있습니다.
하지만 이러한 정보는 사용자의 사생활을 침해할 가능성이 높으므로, 사용자의 동의 없이는 사용할 수 없도록 하고 있습니다.
geolocation API를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.
API | |||||
---|---|---|---|---|---|
geolocation | 9.0 |
5.0 - 49.0 (http) 50.0 (https) |
3.5 | 5.0 | 16.0 |
getCurrentPosition() 메소드
getCurrentPosition() 메소드를 이용하면 사용자의 위치에 대한 위도와 경도값을 얻을 수 있습니다.
이 메소드의 첫 번째 인수로는 가져온 사용자의 위치 정보를 출력하는 함수가 들어갑니다.
예제
function findLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showYourLocation);
} else {
loc.innerHTML = "이 문장은 사용자의 웹 브라우저가 Geolocation API를 지원하지 않을 때 나타납니다!";
}
}
이 메소드의 두 번째 인수로는 위치 정보에 관한 오류를 처리하는 함수가 들어갑니다.
예제
function showErrorMsg(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
loc.innerHTML = "이 문장은 사용자가 Geolocation API의 사용 요청을 거부했을 때 나타납니다!"
break;
case error.POSITION_UNAVAILABLE:
loc.innerHTML = "이 문장은 가져온 위치 정보를 사용할 수 없을 때 나타납니다!"
break;
case error.TIMEOUT:
loc.innerHTML = "이 문장은 위치 정보를 가져오기 위한 요청이 허용 시간을 초과했을 때 나타납니다!"
break;
case error.UNKNOWN_ERROR:
loc.innerHTML = "이 문장은 알 수 없는 오류가 발생했을 때 나타납니다!"
break;
}
}
이처럼 가져온 사용자의 위치 정보를 구글 맵을 통해 표시할 수 있습니다.
예제
function showYourLocation(position) {
var userLat = position.coords.latitude;
var userLng = position.coords.longitude;
var imgUrl = "http://maps.googleapis.com/maps/api/staticmap?center=" + userLat + "," + userLng + "&zoom=15&size=500x400&sensor=false";
document.getElementById("mapLocation").innerHTML = "<img src='"+imgUrl+"'>";
}
위의 예제처럼 단순한 이미지로 표시하는 것이 아닌 구글 맵 스크립트를 이용한 연동도 가능합니다.
예제
function showYourLocation(position) {
var userLat = position.coords.latitude;
var userLng = position.coords.longitude;
var userLocation = new google.maps.LatLng(userLat, userLng);
loc = document.getElementById("mapLocation");
loc.style.width = '500px';
loc.style.height = '400px';
var mapOptions = {
center: userLocation,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
}
var map = new google.maps.Map(loc, mapOptions);
var marker = new google.maps.Marker({position:userLocation,map:map,title:"여기가 현재 위치입니다!"});
}
Geolocation API 메소드
Method | 설명 |
---|---|
getCurrentPosition() | 사용자의 현재 위치를 가져옴. |
watchPosition() | 사용자의 현재 위치를 가져오고 나서, 사용자의 움직임에 따라 지속적으로 위치 정보를 갱신함. |
clearWatch() | watchPosition() 메소드의 실행을 중지함. |
getCurrentPosition() 메소드의 반환값
속성 | 반환값 |
---|---|
coords.latitude | 소수로 표현된 위도 값 |
coords.longitude | 소수로 표현된 경도 값 |
coords.accuracy | 위도 값과 경도 값의 정확도 |
coords.altitude | 평균 해수면을 기준으로 하는 고도 값(해발) |
coords.altitudeAccuracy | 고도 값의 정확도 |
coords.heading | 북쪽을 기준으로 현재 진행 방향에 대한 시계방향으로의 각도 값(˚) |
coords.speed | 초당 이동한 미터 수를 나타내는 속도 값(초속) |
timestamp | 위치 정보를 가져온 시간을 나타냄. |