HTML5 - Geolocation (지리적 위치)

아래 내용은 www.w3schools.com을 번역한 내용입니다.

유저의 위치

HTML5 Geolocation은 사용자의 지리학적 위치를 알아낼 수 있습니다.

 

특정 네트워크에서는 표시되지 않을 수 있습니다.

 

 

해당 기능은 유저의 허용이 있어야만 사용할 수 있는 기능입니다.

브라우저 지원

IE9, FireFox, Chrome, Safari, Opera

Note: GPS장치가 있으면 좀더 정확한 위치를 확인할 수 있습니다.

HTML5 - 지리적 위치 사용하기

getCurrentPosition() 메소드를 사용하여 사용자의 위치를 얻어올 수 있습니다. 아래 예제는 사용자의 위치의 위도와 경도를 반환 간단한 위치 정보의 예입니다. 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<p id="demo1">버튼을 누르면 당신의 좌표가 표시됩니다.:</p> <button onclick="getLocation_cord()">좌표 구하기!!</button> <script> var x1=document.getElementById("demo1"); function getLocation_cord()   {   if (navigator.geolocation)     {     navigator.geolocation.getCurrentPosition(showPosition1);     }   else{x1.innerHTML="Geolocation is not supported by this browser.";}   } function showPosition1(position)   {   x1.innerHTML="Latitude: " + position.coords.latitude +   "<br />Longitude: " + position.coords.longitude;      } </script>

버튼을 누르면 당신의 좌표가 표시됩니다.:

예제 설명:

1. geolocation이 지원되는지 체크 합니다.

2. 만약 지원 된다면 getCurrentPosition()을 호출합니다. 그렇지 않다면 지원하지 않는다는 스트링을 출력합니다.

3. 만약 성공적으로 getCurrentPostion()이 호출 된다면 결과값을 showPosition1메소드를 호출하면서 position을 파라미터로 넘겨줍니다.

4. showPosition1은 화면에 좌표값을 출력합니다.

위 예제는 에러 핸들링이 없는 간단한 geolocation예제 입니다.

error와 rejection 처리

getCurrentPosition() 메소드의 두번째 매개 변수는 오류를 처리하는 데 사용됩니다. 그것은 사용자의 위치를 ​​구하는 것에 실패할 경우 실행할 함수를 지정합니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<p><p id="demo2">Click the button to get your coordinates:</p> <button onclick="getLocation2()">좌표 구하기!!</button> <script> var x2=document.getElementById("demo2"); function getLocation2()   {   if (navigator.geolocation)     {     navigator.geolocation.getCurrentPosition(showPosition2,showError);     }   else{x2.innerHTML="Geolocation is not supported by this browser.";}   } function showPosition2(position)   {   x2.innerHTML="Latitude: " + position.coords.latitude +   "<br />Longitude: " + position.coords.longitude;      } function showError(error)   {   switch(error.code)     {     case error.PERMISSION_DENIED:       x2.innerHTML="User denied the request for Geolocation."       break;     case error.POSITION_UNAVAILABLE:       x2.innerHTML="Location information is unavailable."       break;     case error.TIMEOUT:       x2.innerHTML="The request to get user location timed out."       break;     case error.UNKNOWN_ERROR:       x2.innerHTML="An unknown error occurred."       break;     }   } </script> </p>

Click the button to get your coordinates:

Error Code:

1. Permission denied - 사용자가 위치 추적을 허용하지 않을 때.

2. Position unavailable - 현재 위치를 구할 수 없을 때.

3. Time out - 작업 수행 시간이 길어져 끝났을 때.

좌표점을 Map에 표시하기

구글맵 서비스를 이용하여 좌표점을 맵에 표시할 수 있습니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<p id="demo3">좌표를 구하기 위해서 버튼을 누르세요.:</p> <button onclick="getLocation3()">좌표 구하기!!</button> <div id="mapholder1"></div> <script> var x3=document.getElementById("demo3"); function getLocation3()   {   if (navigator.geolocation)     {     navigator.geolocation.getCurrentPosition(showPosition3,showError3);     }   else{x3.innerHTML="이 브라우저에서는 위치 추적을 할 수 없습니다.";}   }   function showPosition3(position)   {   var latlon=position.coords.latitude+","+position.coords.longitude;     var img_url="http://maps.googleapis.com/maps/api/staticmap?center="   +latlon+"&zoom=14&size=400x300&sensor=false";   document.getElementById("mapholder1").innerHTML="<img src='"+img_url+"' />";   }   function showError3(error)   {   switch(error.code)     {     case error.PERMISSION_DENIED:       x3.innerHTML="User denied the request for Geolocation."       break;     case error.POSITION_UNAVAILABLE:       x.innerHTML="Location information is unavailable."       break;     case error.TIMEOUT:       x3.innerHTML="The request to get user location timed out."       break;     case error.UNKNOWN_ERROR:       x3.innerHTML="An unknown error occurred."       break;     }   } </script>

좌표를 구하기 위해서 버튼을 누르세요.:

위 예제는 고정 이미지에 위도와 경도에 해당하는 위치를 화면에 보여줍니다.

위치 - 특정 정보

이 페이지는 지도에 사용자의 위치를 표시하는 방법을 보여주었습니다. 그러나 위치정보는 지역 특정 정보를 위해 매우 유용한 정보입니다.

1. 최신 지역 정보

2. 사용자 근처 재미있는 정보 보여주기

3. Turn by turn 내비게이션(GPS)

getCurrentPosition 메소드 - return data

getCurrentPosition 메소드의 return data의 속성 값에 대해 알아보겠습니다.

Property	Description
coords.latitude	10진수로 표현한 위도
coords.longitude	10진수로 표현한 경도
coords.accuracy	좌표 정확도
coords.altitude	평균 해발 고도
coords.altitudeAccuracy	평균 해발 고도 정확도
coords.heading	북쪽으로부터 시계방향으로의 각도
coords.speed	meter per second.
timestamp	date/time

 

Geolocation 객체 - 재미있는 메소드들.

watchPosition() - 사용자의 위치가 자동차 안의 GPS처럼 계속 업데이트가 됩니다.

clearWatch() - watchPosition()을 중지 합니다.

아래 예제는 watchPosition()에 대한 예제 입니다. 테스트를 하기 위해서는 아이폰 같은 것을 들고 계속 이동하셔야 할겁니다^^

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<p id="demo4">버튼을 누르면 좌표가 업데이트 됩니다.:</p> <button onclick="getLocation4()">좌표 구하기!!</button> <script> var x4=document.getElementById("demo4"); function getLocation4()   {   if (navigator.geolocation)     {     navigator.geolocation.watchPosition(showPosition4);     }   else{x4.innerHTML="이 브라우저는 위치추적이 지원되지 않습니다.";}   } function showPosition4(position)   {   x4.innerHTML="Latitude: " + position.coords.latitude +   "<br />Longitude: " + position.coords.longitude;      } </script>

Latitude: 44.784584
Longitude: 10.889242

 

출처 : http://devsw.tistory.com/110