HTML5 지리 위치

HTML5 Geolocation(지리정보)는 사용자 위치를 정위치합니다.

직접 경험해보세요: 구글 맵에서 위치를 표시

사용자 위치를 정위치

HTML5 Geolocation API는 사용자 위치를 가져오기 위해 사용됩니다.

이 기능이 사용자의 사생활을 침해할 수 있으므로, 사용자가 동의하지 않으면 사용자 위치 정보는 사용할 수 없습니다.

브라우저 지원

Internet Explorer 9, Firefox, Chrome, Safari 및 Opera는 지리정보를 지원합니다.

주의사항:GPS를 장착한 장치(예: iPhone)의 경우, 지리정보가 더 정확합니다.

HTML5 - 지리정보 사용

사용자 위치를 가져오기 위해 getCurrentPosition() 메서드를 사용하십시오.

다음 예제는 사용자 위치의 경도와 위도를 반환할 수 있는 간단한 지리정보 예제입니다.

예제

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="이 브라우저는 위치정보를 지원하지 않습니다.";}
  }
function showPosition(position)
  {
  x.innerHTML="위도: " + position.coords.latitude +
  "<br />경도: " + position.coords.longitude;
  }
</script>

직접 테스트해 보세요

예제 설명:

  • 지리정보를 지원하는지 확인
  • 지리정보를 지원하는 경우 getCurrentPosition() 메서드를 실행합니다. 지원하지 않는 경우 사용자에게 메시지를 표시합니다
  • getCurrentPosition()가 성공적으로 실행되면, showPosition() 파라미터에 지정된 함수에 coordinates 객체를 반환합니다
  • showPosition() 함수는 경도와 위도를 가져오고 표시합니다

위의 예제는 오류 처리가 포함되지 않은 매우 기본적인 지리정보 스크립트입니다.

오류와 거부 처리

getCurrentPosition() 메서드의 두 번째 파라미터는 오류 처리를 위해 사용됩니다. 이는 사용자 위치를 가져오는 데 실패했을 때 실행되는 함수를 정의합니다:

예제

function showError(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;
    }
  }

직접 테스트해 보세요

에러 코드:

  • Permission denied - 사용자가 지리적 위치를 사용하지 않을 권한이 없음
  • Position unavailable - 현재 위치를 얻을 수 없음
  • Timeout - 작업 시간 초과

지도에서 결과 표시

지도에서 결과를 표시하려면, 경도와 위도를 사용할 수 있는 지도 서비스에 접근해야 합니다. 예를 들어 구글 맵이나 바aidu 맵과 같은 서비스를 사용하세요:

예제

function showPosition(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("mapholder").innerHTML="<img src='"+img_url+"' />";
}

직접 테스트해 보세요

이 예제에서는 반환된 경도와 위도 데이터를 사용하여 구글 맵에서 위치를 표시합니다(정적 이미지 사용).

구글 맵 스크립트

위의 링크는 스크립트를 사용하여 표시되는 마커, 줌, 드래그 옵션을 포함한 인터랙티브 지도를 표시하는 방법을 보여줍니다.

주어진 위치의 정보

이 페이지는 사용자 위치를 지도에 표시하는 방법을 보여줍니다. 그러나, 지리적 위치는 주어진 위치의 정보에도 매우 유용합니다.

예제:

  • 로컬 정보 업데이트
  • 사용자 주위의 관심 포인트를 표시
  • 인터랙티브 차량 내 주행 지도 시스템 (GPS)

getCurrentPosition() 메서드 - 반환 데이터

성공 시에도 getCurrentPosition() 메서드는 객체를 반환합니다. 항상 latitude, longitude 및 accuracy 속성을 반환합니다. 사용 가능하다면, 다음의 다른 속성도 반환합니다.

속성 설명
coords.latitude 진수수법 위도
coords.longitude 진수수법 경도
coords.accuracy 위치 정확도
coords.altitude 해발, 해면 위로 미터로 계산
coords.altitudeAccuracy 위치의 고도 정확도
coords.heading 방향, 정북에서 시작하여 도로 계산
coords.speed 속도, 초당 미터로 계산
timestamp 응답의 날짜/시간

Geolocation 객체 - 다른 흥미로운 메서드

watchPosition() - 사용자의 현재 위치를 반환하고, 사용자가 이동할 때마다 업데이트된 위치를 반환합니다(차량의 GPS처럼)

clearWatch() - watchPosition() 메서드를 중지합니다

아래의 예제는 watchPosition() 메서드를 보여줍니다. 이 예제를 테스트하기 위해 정확한 GPS 장치(예: iPhone)가 필요합니다:

예제

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="이 브라우저는 위치정보를 지원하지 않습니다.";}
  }
function showPosition(position)
  {
  x.innerHTML="위도: " + position.coords.latitude +
  "<br />경도: " + position.coords.longitude;
  }
</script>

직접 테스트해 보세요