jQuery Mobile(PhoneGap) [JS] navigator geolocation 현재 접속 위치 가져오기

이번 포스팅은 windows의 ip기반으로 지리적 위치를 알아내는 navigator API를 사용해보겠습니다.

좌표값을 알아내기 위한 navigator의 자식객체 geolocation을 사용해서 말이죠!

 

제가 이 포스팅을 하는 이유는 현재 네이버 지도 API를 가지고 개발을 하고 있어서 작성하게 되었습니다.

 

현재 뭐 기능 구현은 다 마친 상태고 솔루션에 붙여넣기만 하면 되는  상황입니다.

 

이 navigator API 를 사용하게 된 이유는 사용자가 자신의 pc에서 지도사이트에 접속했을때 

접속한 pc의 장소부근을 지도에 디폴트로 띄어주기 위함이었습니다.

물론 위치허용을 거절하거나 IE하위버전에서는 사용할수가 없겠죠 ㅎㅎ

일단 먼저 전체소스 보시죠.

 

 

/* navigator.geolocation 전체코드 */

1. $(document).ready(function() {
2.         if(navigator.geolocation) {
3.             navigator.geolocation.getCurrentPosition(
4.                 function nowLocation(position) {
5.                     var lat = position.coords.latitude;
6.                     var lon = position.coords.longitude;
7.                    
8.                     $.ajax({
9.                         type: "POST",
10.                         url: "Map.do",
11.                         data: "lat=" + lat + "&lon=" + lon,
12.                         success: function(data) {
13.                             $('#mapview').html(data);
14.                         }
15.                     });
16.                 },
17.                 function(error) {
18.                     alert("브라우저의 위치추적을 허용하지 않으셨습니다. 기본좌표로 이동합니다.");
19.                     var lat = 37.5327619;
20.                     var lon = 127.0139427;
21.                    
22.                     $.ajax({
23.                         type: "POST",
24.                         url: "Map.do",
25.                         data: "lat=" + lat + "&lon=" + lon,
26.                         success: function(data) {
27.                             $('#mapview').html(data);
28.                         }
29.                     });  
30.                 }
31.         );
32.     }   
33.         else {
34.             //alert("Your Browser don't support for Geolocation");
35.             var lat = 37.5327619;
36.             var lon = 127.0139427;
37.            
38.             $.ajax({
39.                 type: "POST",
40.                 url: "Map.do",
41.                 data: "lat=" + lat + "&lon=" + lon,
42.                 success: function(data) {
43.                     $('#mapview').html(data);
44.                 }
45.             });  
46.         }
47.     });

                                                                                                                                      

 

소스를 보시면 어느정도 이해가 가실껍니다.

뭐...어려운 부분은 딱히 없어요...네...

 

 

/* navigator API 사용 유무확인 */

1. if(navigator.geolocation) { /* API 사용 가능 브라우저처리 */ }
2. else { /* API 사용 불능 브라우저처리 */ }

                                                                                                                                      

 

 

IE8 이하 버전들은 아마 안될꺼에요. IE9 부터 지원되는 API 라서 그래서 조건 처리를 위와 같이 해주었습니다.

navigator API를 사용가능한 브라우저라면 최초 접속시 위치를 허용할지 말지를 물어봅니다.

당연히 쓸려고 만들었으니 허용으로 하면 조건문 내부로 들어갑니다.

 

 

/* navigator geolocation 위치 허용 */

1. function nowLocation(position) {
2.     var lat = position.coords.latitude;
3.     var lon = position.coords.longitude;
4.     ...
5. }

                                                                                                                                      

 

 

다음과 같이 위도와 경도를 얻어옵니다.

그리고 저는 ajax로 위도와 경도값을 넘겨주어 지도에 처리해주었습니다.

처리한 부분은 네이버지도 API 에서 보시길....

위는 위치정보를 허용했을때고 

허용하지 않았을때 어떻게 하느냐?!

 

 

/* navigator geolocation 위치 불허용했을때 */

1. function(error) {
2.     //alert("브라우저의 위치추적을 허용하지 않으셨습니다. 기본좌표로 이동합니다.");
3.     var lat = 37.5327619;
4.     var lon = 127.0139427;
5.     ...
6. }

                                                                                                                                      

 

 

다음과 같이 에러 function을 만들어 지정한 위치로 날라가게끔 처리하였습니다.

만약 navigator API를 사용하지 못하는 브라우저라면 자동으로 else문으로 빠져서 처리가 되지만

API를 사용할 수 있는데 허용거부를 해버리면 지도가 뜨지않아요.

그래서 error로 빠지게 됩니다 그 부분들은 에러 함수에서 처리하였습니다.

[출처] [JS] navigator geolocation 현재 접속 위치 가져오기|작성자 종벌