2. 적용 범위
Geolocation API를 통해서 출력 되는 위치 값은 World Geodetic System coordinates (WGS84)을 따른다. 일반적으로 GPS 수신기에서 받는 위치 값을 의미한다. 위도(latitude),경도(longitude),고도(height)로 구성된다. 국내의 경우, 이런 WGS84 좌표계 보다는 TM 좌표계를 사용하는 경우가 많은데, 국제기준을 사용하는 것이 필요할 듯 하다.
3. 보안 및 사생활 보호 관련
Geolocation API는 사용자의 위치 값을 다루기 때문에, 사용자의 프라이버시에 대한 고려가 필요하다. 즉 사용자의 허가 없이 사용자의 위치 값을 추출해서는 안된다. 이런 사생활 보호 관련 된 부분은 W3C에서도 민감히 다루는 실정인데, HTML5 규약에서는 웹브라우저 제작사가 사용자의 동의없이 위치 정보를 추출하는 것을 막도록 하고 있다.
4. Geolocation API 사용 관련
자 이제 실질적으로 Geolocation API를 사용해 보도록 하겠다. 사용 방법은 이전 포스트에서 언급한 API를 사용하면 된다.
우선 기본적인 객체 구성이 어떤지 살펴 보자.
|
interface Geolocation {
void getCurrentPosition(in PositionCallback successCallback,
in optional PositionErrorCallback errorCallback,
in optional PositionOptions options);
long watchPosition(in PositionCallback successCallback,
in optional PositionErrorCallback errorCallback,
in optional PositionOptions options);
void clearWatch(in long watchId);
};
[Callback=FunctionOnly, NoInterfaceObject]
interface PositionCallback {
void handleEvent(in Position position);
};
[Callback=FunctionOnly, NoInterfaceObject]
interface PositionErrorCallback {
void handleEvent(in PositionError error);
};
|
위와 같이 일반적으로 Geolocation이라는 인터페이스를 브라우저에서 구현한다. geolocation은 자바스크립트에서 사용하는 navigator 객체의 하위 객체로 들어가 있으며 위 내용과 같이 getCurrentPostioin과 watchPosition 함수를 구현한다. 단순히 이를 이용하는 개발자는 앞서 언급했듯이 아래와 같은 자바 스크립트를 페이지에 내장해 줌으로써 쉽게 사용자 디바이스의 위치 값을 사용할 수 있다.
구체적인 내용보다는 예제 위주로 살펴 보자 아래와 같이 코드를 구성해 보았다.
<!DOCTYPE html> <html> <head> <meta charset="euc-kr"> <title>Geolocation API Example By BetterThanNow</title> <script type="text/javascript"> var positionOptions={enableHighAccuracy:true, timeout:1000, maximumAge:6000}; // 시간단위는 millisecond 즉 10^-3s function getPosition(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(positionCallback,positionErrorCallback,positionOptions) }else{ alert("브라우저가 Geolocation을 지원하지 않습니다."); } } // Position call back 함수 : 여기서 구해진 위치값이 나온다. function positionCallback(position){ var latitude = position.coords.latitude; //위도 var longitude = position.coords.longitude; //경도 var altitude = position.coords.altitude; //고도 var speed = position.coords.speed; //속도 var heading = position.coords.heading; //방향(북쪽을 기준으로 시계 방향으로 몇도인지) -> 모바일 단말 지자기 센서가 있을 경우 var outputString="당신의 위치는 위도:"+latitude+"\n경도:"+longitude+"\n고도:"+altitude+"\n속도:"+speed+"\n방향:"+heading+"입니다."; alert(outputString); } // Postion Error 처리 함수 function positionErrorCallback(error){ switch(error.code) { case error.TIMEOUT: alert("시간을 초과했습니다."); break; case error.POSITION_UNAVAILABLE: alert("위치를 구할 수 없습니다."); break; case error.PERMISSION_DENIED: alert("사용자가 위치 기능 사용을 거부했습니다."); break; case error.UNKNOWN_ERROR: alert("Error"); break; default : alert (errro.code); } } </script> </head> <body> <button type="button" onclick="getPosition()">Get My Position</button> </body> </html> |
위와 같은 설정으로 위치 값을 구해낼 수 있다. 이를 실제 구글맵과 함께 적용해 보았다.
(단 위치 값은 일반 PC에서는 제대로 나오지 않는다. 모바일 웹에서 구현할 경우 모바일 단말의 GPS 센서나 WPS를 이용하기 때문에 보다 정확한 값을 구할 수 있다.)
* 아래 좌측의 Map On 버튼을 누르면 구글 맵이 활성화 되고 "Get My Position"을 누르면 위치로 지도가 이동한다.
* 초기 위치는 영국으로 설정했음
'Developing > HTML5' 카테고리의 다른 글
| 드라코니언 에러 처리 - HTML5 여담 (0) | 2011.07.19 |
|---|---|
| HTML5 : Geolocation API #1 (0) | 2011.01.05 |
| HTML5의 5가지 보안 위협 (0) | 2010.12.28 |