웹 지오로케이션 API
- 이전 페이지 Web Fetch API
- 다음 페이지 AJAX 개요
사용자 위치를 정위치합니다
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>
예제 설명:
- Geolocation을 지원하는지 확인합니다
- 지원된다면 getCurrentPosition() 메서드를 실행하십시오. 지원되지 않으면 사용자에게 메시지를 표시합니다
- getCurrentPosition() 메서드가 성공하면, showPosition) 매개변수에 정의된 함수에 대한 coordinates 객체를 반환합니다
- 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>
- 이전 페이지 Web Fetch API
- 다음 페이지 AJAX 개요