jQuery Mobile(PhoneGap) Geolocation API를 이용해 위치 정보를 알아내기

Introduction

이번 시간에는 Geolocation API에 대해 알아보겠습니다. Geolocation은 위도, 경도등과 같은 기기의 위치 정보를 제공합니다. 위치 정보는 보통 GPS와 WiFi등을 이용하여 위치를 추측하는데 100% 완벽하게 정확하다고는 할 수 없습니다. 가끔 지도 앱을 사용하다 보면 위치가 이상하게 나오는 경우가 있는데 아마 이런 기저 기술 자체에 이유가 있는 것 같습니다. 어쨌든 이런 위치 정보는 다양하게 사용됩니다. 예를 들어 iPhone만 하더라도 기본 카메라 어플리케이션에서 사진을 찍으면 찍은 위치 정보를 기록하여 나중에 사진을 위치 기반으로 볼 수있는 기능이 있습니다.

---

Step 1:Geolocation API 살펴 보기

 

 

 

먼저 메서드를 살펴보면 뭔가 Accelerometer API와 매우 비슷합니다. getCurrent, watch, clear를 접두사로 하여 메서드 이름을 지었군요. 일관성이 있어서 메서드를 이해하기에 더 좋습니다. 

 

getCurrentPosition메서드는 현재 기기의 위치를 Position 오브젝트 형으로 반환합니다. watchPosition메서드는 일정 간격으로 기기의 위치가 바뀌면 현재 기기의 위치를 Position 오브젝트 형으로 반환합니다. clearWatch메서드는 watchPosition메서드로 위치 추적을 하는 것을 해제 하는 메서드입니다. 

 

인자로는 geolocationSuccess, geolocationError, geolocationOptions가 있는데 각각 위치 정보를 가져오는 데 성공했을 때, 실패했을 때, 실행 옵션입니다. 

 

geolocationOptions 속성

• frequency:위치 정보를 가져올 시간 간격으로 단위는 밀리세컨드(ms). 기본값은 10000
• enableHighAccuracy:위치 정보의 정확성을 최상으로 할지를 지정
• timeout:기기로부터 위치 정보를 가져올 때까지의 최대 대기 시간
• maximumAge:위치 정보를 캐싱하는 기간을 지정. 단위는 밀리세컨드(ms).

 

오브젝트로는 Position, PositionError, Coordinates가 있고 각각 위치 정보를 가져오는 데 성공했을 때, 실패했을 때 전달되는 오브젝트이고 Coordinates는 Position의 coords속성에 할당된 오브젝트입니다.

 

Position 오브젝트 속성

• coords:지리학적 좌표 정보를 포함. Coordinates 오브젝트
• timestamp:지리학적 좌표 정보가 생성된 시간으로 단위는 밀리세컨드(ms)

Coordinates 오브젝트 속성

• latitude:위도
• longitude:경도
• altitude:고도
• accuracy:위도와 경도의 정확도
• altitudeAccuracy:고도의 정확도
• heading:방향을 나타내며 북쪽으로부터 시계방향으로 현재 방향까지의 각도
• speed:현재 기기의 속도를 미터 퍼 세컨드로 나타냄

 

---

Step 2: Geolocation API를 사용하는 어플리케이션 만들기

이론을 살펴 봤으니 이제 예제를 한번 만들어봐야겠죠? ㅎㅎ 이번 어플리케이션에서는 구글 맵 API를 이용하여 화면에 자신의 위치를 표시하는 어플리케이션을 만들어 보겠습니다. 새 프로젝트를 생성합니다. Site > New Site항목을 선택하여 프로젝트의 이름과 폴더를 생성한 후, File > New항목을 선택하여 Page from Sample > Mobile Starters > jQuery Mobile(PhoneGap)템플릿을 선택하고 저장합니다. 

 

먼저 UI부터 구성합니다.

 

1. <div data-role="page" id="page">

2.   <div data-role="header">

3.     <h1>Geolocation</h1>

4.   </div>

5.   <div id="map_view" style="padding:0px;">     

6.   </div>

7.     <button data-role="button" data-icon="star" onClick="findMyPosition();">My Position</button>

8. </div>

 

id가 map_view로 지정된 div엘레멘트에는 런타임에 지도가 들어갈 용도로 쓰이고, 하단의 버튼은 누르면 현재 기기의 위치를 보여주도록 하기 위함입니다.

 

 

이제 Geolocation API를 사용하기 위해 다음과 같이 코딩을 합니다.

 

1. <script>

2. function onBodyLoad(){

3.   document.addEventListener( "deviceready", onDeviceReady, false );

4. }

5. function onDeviceReady(){

6.   var width = $('#page').width();

7.   var height = $('#page').height() - $('#page div[data-role="header"]').height()*2 - $('#page button[data-role="button"]').height();

8.   $('#map_view').css({'height':height + 'px', 'width':width + 'px'});

9. }

10.  

11. function onSuccess( $position ){

12.   var latitudeLongitude = new google.maps.LatLng( $position.coords.latitude, $position.coords.longitude );

13.   var map = new google.maps.Map( document.getElementById('map_view'), {

14.     zoom:12, center:latitudeLongitude, mapTypeId:google.maps.MapTypeId.ROADMAP});

15.   var marker = new google.maps.Marker({position:latitudeLongitude, map:map, title: "It's me!"});

16. }

17. function onFail(){

18.   console.log( 'Failed to get location' ); 

19. }

20. function findMyPosition(){

21.   navigator.geolocation.getCurrentPosition( onSuccess, onFail);

22. }

23. </script>

 

문서의 로딩이 끝나면 구글 맵을 보여주는 map_view div엘레멘트의 width, height속성 값을 지정합니다. width는 기기(page div엘레멘트가 최상단 뷰 컨테이너이기 때문에 기기의 너비와 같음)의 너비로 height는 페이지의 높이에 헤더부분의 높이와 버튼의 높이를 빼준 만큼을 맵의 크기로 지정합니다. 

 

 

 

버튼을 누르면 findMyPosition함수를 실행하여 getCurrentPosition메서드가 호출됩니다. 위치 정보를 가져오는 데 성공하면 onSuccess함수가 실행되고 위치를 표시합니다. onSuccess함수는 구글 맵 API를 사용하여 전달받은 Position 오브젝트로부터 위도 경도로 google.maps.LatLng인스턴스를 생성하여 google.maps.Map인스턴스를 생성하는데 인자로 전달합니다. 이외에 생성할 때 필요한 인자는 맵을 표시할 엘레멘트, 확대 수치, 맵의 중앙을 어느 지점으로 표시할 지(여기서 google.maps.LatLng인스턴스 사용), 맵을 표시하는 타입입니다. 다음으로 google.maps.Marker인스턴스 생성하여 맵에 배치합니다. 위치 정보를 가져오는데 실패하면 콘솔 로그에 실패 메세지를 전달합니다.

 

Geolocation API경우 iPhone 시뮬레이터에서도 테스트가 가능한데, 실제 위치로 테스트할 수 는 없고 시뮬레이터에서 제공하는 위치를 선택하여 확인할 수 있습니다. 시뮬레이터 상단의 Debug > Location항목에서 가상 위치를 이용할 수 있습니다.

 

 

 

 

 

 

---

Conclusion

위치 정보는 요즘 거의 대부분의 앱에서 응용하는 것에서 알 수 있듯이 매우 중요한 기능으로 단순한 위치 정보에서부터 매쉬업을 통한 새로운 가치를 만들어 내는 것까지 가능합니다.