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 - 사용자가 지리적 위치를 사용하지 않음
  • 위치 불가 - 현재 위치를 얻을 수 없음
  • Timeout - 작업 시간 초과

결과를 맵에 표시

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

예제

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>

직접 테스트해 보세요