h41. HTML5 지리위치 정보의 사용

HTML5 지리위치 정보의 사용

HTML 지리위치 API 는 사용자의 지리적 위치를 얻는데 사용합니다. 

프라이버시 침해 문제가 있기 때문에, 위치정보는 사용자의 동의가 있는 경우에만 사용될 수 있습니다.

크롬, 파이어 폭스, 사파리 그리고 IE9 이상에서 완전하게 지원됩니다. 

그리고, 지리위치는 스마트폰에서 GPS 기능을 사용하면 더 정확한 위치를 찾을 수 있습니다.

HTML 위치 정보 기능은 getCurrentPosition() 메소드(함수)를 가지고 있는데, 이 함수는 사용자의 위치정보를 위도(북향, latitude) 와 경도(서향, longitude) 값으로 받아옵니다.

아래 코드로 설명하면, 맨 위에 텍스트를 "w" 라고 정의하였고, 지도가 표시될 위치는 "x" 라고 정의하였습니다.

그 아래 스크립트에서, 먼저 네비게이터.위치정보(navigator.geolocation) 가 지원되는지 확인하고 지원되면, 현재 위치 정보 가져오기 getCurrentPosition() 메소드(함수)를 실행합니다.

getCurrentPosition() 함수가 성공적으로 현재 위치 정보를 구하게 되면, 그 값을 첫 번째 파라미터(함수)인 currentPosition 에 전달해 줍니다. 

그러나 현재 위치 정보 구하지 못하고 오류가 있다면 두번째 파라미터인 geoError 를 실행하고 오류 정보를 전달해 줍니다.

currentPosition() 함수는 현재 위치 정보 myPosition (getCurrentPosition 함수가 찾은) 을 받아서, "경도값, 위도값" 모양의 문자열로 만들어 변수 "a" 에 담아 둡니다. 

이 "경도값, 위도값" 문자열을 구글 맵 URI 에 삽입시키고, 다시 이 URI 값을 변수 "b" 에 담아 놓습니다.

이제 위에서 정의한 지도가 표시될 영역 "x" 에 구글 지도 URI 값이 담긴 변수 "b" 를 이미지 태그 안에 넣어서 넘겨주면, innerHTML 이라는 내장 함수에 의해서 HTML 태그가 "x" 영역에 표시되어 현재 위치 지도가 보이게 됩니다.

그러나 만일, 사용자의 위치 값을 얻어 오지 못하였으면, geoError() 함수가 실행되는데 이 때 getCurrentPosition() 함수는 오류의 종류에 따라 오류 코드 상수 값 (PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT, UNKNOWN_ERROR) 중에 하나를 넘겨 주고, 

geoError() 함수는 이 상수에 따라 문자 "w" 의 내용을 해당하는 오류 내용으로 바꾸어 주게 됩니다.

<p id="w">현재의 위치정보를 표시하려면 아래 버튼을 눌러주세요.</p>
<button onclick="getLocation()">지표상에 내위치 찾기</button>
<p><br /></p>
<div id="x"></div>

<script>
function getLocation() {
 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(currentPosition, geoError);
 } else {
 w.innerHTML = "지리위치를 지원하지 않는 브라우저 입니다.";
 }
}

function currentPosition(myPosition) {
 var a = myPosition.coords.latitude + "," + myPosition.coords.longitude;

 var b = "http://maps.googleapis.com/maps/api/staticmap?center="
 +a+"&zoom=10&size=480x320&sensor=false";
 document.getElementById("x").innerHTML = "<img src='"+b+"'>";
}

function geoError(myError) {
 switch(myError.code) {
 case myError.PERMISSION_DENIED:
 w.innerHTML = "사용자가 위치정보 사용요청을 거절하였습니다."
 break;
 case myError.POSITION_UNAVAILABLE:
 w.innerHTML = "위치 정보가 사용 가능하지 않습니다."
 break;
 case myError.TIMEOUT:
 w.innerHTML = "사용자 위치정보를 얻기 위한 요청이 타임아웃 되었습니다."
 break;
 case myError.UNKNOWN_ERROR:
 w.innerHTML = "알수 없는 오류가 발생하였습니다."
 break;
 }
}
</script>

현재의 위치정보를 표시하려면 아래 버튼을 눌러주세요.

---

[광고] Udemy 동영상 강의로 보기