웹 지오로케이션 API

사용자 위치를 정위치합니다

HTML Geolocation API는 사용자의 위치를 얻기 위해 사용됩니다.

이는 개인정보를 해치릴 수 있으므로, 사용자가 승인하지 않으면 위치는 사용할 수 없습니다.

직접 시도해보세요

주의사항:GPS를装有设备的地理定位(如智能手机)最为准确。

모든 브라우저가 Geolocation API를 지원합니다:

크롬 IE 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원

주의사항:Chrome 50부터 Geolocation API는 단순히 안전한 컨텍스트(예: HTTPS)에만 적용됩니다. 사이트가 비안전한 소스(예: HTTP)에 퍼시스팅되면 사용자 위치를 얻는 요청이 더 이상 작동하지 않습니다.

Geolocation API 사용

getCurrentPosition() 메서드는 사용자 위치를 반환합니다.

아래의 예제는 사용자 위치의 위도와 경도를 반환합니다:

예제

<script>
const 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>

직접 시도해보세요

예제 설명:

  1. Geolocation을 지원하는지 확인합니다
  2. 지원된다면 getCurrentPosition() 메서드를 실행하십시오. 지원되지 않으면 사용자에게 메시지를 표시합니다
  3. getCurrentPosition() 메서드가 성공하면, showPosition) 매개변수에 정의된 함수에 대한 coordinates 객체를 반환합니다
  4. showPosition() 함수는 위도와 경도를 출력합니다

위의 예제는 매우 기본적인 지리적 위치 스크립트로, 오류 처리가 없습니다.

오류와 거부 처리

getCurrentPosition() 메서드의 두 번째 매개변수는 오류 처리를 위해 사용됩니다. 사용자 위치를 얻을 수 없을 경우 실행되는 함수를 정의합니다:

예제

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation.";
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable.";
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out.";
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred.";
      break;
  }
}

직접 시도해보세요

지도에서 결과 표시

지도에서 결과를 표시하려면, 예를 들어 Google 지도와 같은 지도 서비스에 접근해야 합니다.

아래의 예제에서 반환된 위도와 경도는 Google 맵에서 위치를 표시하는 데 사용됩니다(정적 이미지를 사용):

예제

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

위치별 정보

이 페이지는 사용자 위치를 맵에 표시하는 방법을 보여줍니다.

Geolocation은 특정 위치에 대한 정보에 대한 것도 매우 유용합니다, 예를 들어:

  • 최신의 현지 정보
  • 사용자 근처의 관심사를 표시합니다
  • 순차적인 항로 nawigation(Turn-by-turn navigation)(GPS)

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

getCurrentPosition() 성공 시 객체를 반환하는 메서드. 항상 위도, 경도, 정확도 속성을 반환합니다. 가능하다면 다른 속성도 반환합니다:

속성 반환
coords.latitude 데시미터로 표시된 위도(항상 반환).
coords.longitude 데시미터로 표시된 경도(항상 반환).
coords.accuracy 위치 정확도(항상 반환).
coords.altitude 평균 해면 높이 이상의 높이(미터로 계산)(가능하다면 반환).
coords.altitudeAccuracy 위치의 높이 정확도(가능하다면 반환).
coords.heading 북에서 시계 방향으로의 방향(가능하다면 반환).
coords.speed 미터/초의 속도(가능하다면 반환).
timestamp 응답의 날짜/시간(가능하다면 반환).

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

Geolocation 객체는 다른 흥미로운 메서드도 있습니다:

  • watchPosition() - 사용자의 현재 위치를 반환하고 (예: 차량 내 GPS와 같이) 사용자가 이동할 때마다 업데이트된 위치를 계속 반환합니다.
  • clearWatch() - watchPosition() 메서드를 중지합니다.

아래의 예제는}} watchPosition() 메서드. 테스트를 위해 정확한 GPS 장치가 필요합니다. (예: 스마트폰)

예제

<script>
const 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>

직접 시도해보세요