[api] HTML5 - Geolocation - 사용자위치 (= 사용자 지리위치 = 지오로케이션)

1. Geolocation 예제 - 사용자위치 구글맵에 표시
2. Geolocation 정의
3. Geolocation 예제 - 사용자위치 표시 : (거부/오류) 처리 X
4. Geolocation 예제 - 사용자위치 표시 : (거부/오류) 처리 O
5. Geolocation 예제 - 정적인 지도에 표시
6. getCurrentPosition() 메서드
7. Geolocation 객체 유용한 메서드

Geolocation 예제 - 사용자위치 구글맵에 표시

 

<button onclick="getLocation()">클릭</button></p>

<div id="mapbox"></div>

<script src="https://maps.google.com/maps/api/js?key=구글맵발급키"></script>

<script>

var x=document.getElementById("demo");

function getLocation()

{

  if (navigator.geolocation)

    {

    navigator.geolocation.getCurrentPosition(hzCoords,hzError);

    }

  else{x.innerHTML="Geolocation 제공 않는 브라우저는 개나 줘버려.";}

}

function hzCoords(position)

{

  var lat=position.coords.latitude;

  var lon=position.coords.longitude;

  var latlon=new google.maps.LatLng(lat, lon)

  var mapbox=document.getElementById('mapbox')

  mapbox.style.height='250px';

  mapbox.style.width='100%';

  var hzOptions=

  {

  center:latlon,zoom:14,

  mapTypeId:google.maps.MapTypeId.ROADMAP,

  mapTypeControl:false,

  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}

  };

  var map=new google.maps.Map(document.getElementById("mapbox"),hzOptions);

  var marker=new google.maps.Marker({position:latlon,map:map,title:"당신 위치 !!"});

}

function hzError(error)

{

  switch(error.code) 

    {

    case error.PERMISSION_DENIED:

      x.innerHTML="사용자가 정보제공 거부"

      break;

    case error.POSITION_UNAVAILABLE:

      x.innerHTML="위치정보 이용 불가"

      break;

    case error.TIMEOUT:

      x.innerHTML="위치정보 얻기 요청 시간초과"

      break;

    case error.UNKNOWN_ERROR:

      x.innerHTML="예상치 못한 에러 발생"

      break;

    }

}

</script>

 

구글맵 API키 발급: https://cloud.google.com/maps-platform/?hl=ko#products

Geolocation 정의

 

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

 

---

 

1.

개인정보 침해 소지가 있어, 사용자가 거부하면 이용 불가.

2.

지리위치는 스마트 폰과 같이 GPS 지원 장치가 가장 정확.

 

3.

IE9 이상 주요 최신 브라우저 모두 지원.

단, 크롬 50이상 최신 버전은 https 프로토콜에서만 가능.

 

4.

활용 예:

사용자 지역정보 제공
사용자 관심지점 표시
단계별 네비게이션  (GPS활용)

Geolocation 예제 - 사용자위치 표시 : (거부/오류) 처리 X

 

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

var x = document.getElementById("demo");

function homzzang() {

  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(hzCoords);

  } else { 

    x.innerHTML = "Geolocation 미지원 브라우저는 개나 줘버려.";

  }

}

function hzCoords(position) {

  x.innerHTML = "위도 : " + position.coords.latitude + 

  "<br>경도 : " + position.coords.longitude;

}

</script>

 

결과보기

※ getCurrentPosition() 메서드 :사용자 지리위치 반환

Geolocation 예제 - 사용자위치 표시 : (거부/오류) 처리 O

 

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

var x = document.getElementById("demo");

function homzzang() {

  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(hzCoords,hzError);

  } else { 

    x.innerHTML = "Geolocation 미지원 브라우저는 개나 줘버려.";

  }

}

function hzCoords(position) {

  x.innerHTML = "위도 : " + posisiton.coords.latitude + 

  "<br>경도 : " + position.coords.longitude;

}

 

function hzError(error)

{

  switch(error.code) 

    {

    case error.PERMISSION_DENIED:

      x.innerHTML="사용자가 정보제공 거부"

      break;

    case error.POSITION_UNAVAILABLE:

      x.innerHTML="위치정보 이용 불가"

      break;

    case error.TIMEOUT:

      x.innerHTML="위치정보 얻기 요청 시간초과"

      break;

    case error.UNKNOWN_ERROR:

      x.innerHTML="예상치 못한 에러 발생"

      break;

    }

 

}

</script>

 

결과보기

Geolocation 예제 - 정적인 지도에 표시

 

function hzCoords(position) {

  var latlon = position.coords.latitude + "," + position.coords.longitude;

  var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=

  "+latlon+"&zoom=14&size=400x300&sensor=false&key=구글맵발급키";

  document.getElementById("mapbox").innerHTML = "<img src='"+img_url+"'>";

}

 

hzCoords() 함수를 위 함수로 교체

getCurrentPosition() 메서드

성공 시, 사용자위치정보 담긴 coords (좌표) 객체 반환

coords.latitude

위도. 10진수로 표현. (항상 반환)

 

coords.longitude

경도. 10진수로 표현. (항상 반환)

 

coords.accuracy

위치 정확성 (항상 반환)

 

---

 

coords.altitude

평균 해수면 위의 고도. 미터로 표현. (가능한 경우 반환)

 

coords.altitudeAccuracy

위치의 고도 정확도 (가능한 경우 반환)

 

coords.heading

향하는 방향. 시계방향으로 동서남북 표시 (0도:북 / 90도:동 / 180도: 남 / 270도: 서)  (가능한 경우 반환)

 

coords.speed
초당 미터 속도 (가능한 경우 반환)

 

timestamp

응답 날짜/시간 (가능한 경우 반환)

 

Geolocation 객체 유용한 메서드

 

watchPosition()

사용자 현재위치 반환 후, 사용자 이동 시 업데이트 된 위치를 계속 반환. (예: 자동차의 GPS)

 

clearWatch()

watchPosition() 메서드를 중지시킴.

 

---

[예제]

 

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

var x = document.getElementById("demo");

function homzzang() {

  if (navigator.geolocation) {

    navigator.geolocation.watchPosition(hzCoords);

  } else { 

    x.innerHTML = "Geolocation 지원 않는 브라우저는 개나 줘버려.";

  }

}

    

function hzCoords(position) {

    x.innerHTML="위도 : " + position.coords.latitude + 

    "<br>경도 : " + position.coords.longitude;

}

</script>

 

결과보기

※ 예제 확인하려면, 스마트 폰과 같은 정확한 GPS 장치 필요.