HTML 지리 위치 API는 사용자의 위치를 찾는 데 사용된다.
HTML 사용자 위치 찾기
HTML 지리 위치 API는 사용자의 지리적 위치를 가져오는 데 사용된다.
이렇게 하면 개인 정보가 손상될 수 있으므로, 사용자가 승인하지 않으면 해당 직위를 사용할 수 없다.
HTML 위치 API 활용하기
getCurrentPosition() 메서드는 사용자의 위치를 반환하는 데 사용된다.
아래 예제는 사용자 위치의 위도 및 경도를 반환한다:
| <!DOCTYPE html> <html> <body> <p>버튼을 클릭하여 좌표를 확인합니다.</p> <button onclick="getLocation()">위치찾기</button> <p id="demo"></p> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "위도: " + position.coords.latitude + "<br>경도: " + position.coords.longitude; } </script> </body> </html> |
위의 코드를 실행하면 사용자 위치 정보가 아래 그림과 같이 표시된다.
Geolocation이 지원되는지 확인한다
지원되는 경우 getCurrentPosition() 메서드를 실행한다. 그렇지 않은 경우 사용자에게 메시지 표시
getCurrentPosition() 메서드가 성공하면 매개 변수(showPosition)에 지정된 함수로 좌표 개체를 반환한다
showPosition() 함수는 위도 및 경도를 출력한다
위의 예제는 오류 처리가 없는 매우 기본적인 지리 위치 스크립트이다.
HTML 위치 정보 오류 처리
getCurrentPosition() 메서드의 두 번째 파라미터는 오류를 처리하는 데 사용된다. 사용자의 위치를 가져오지 못한 경우 실행할 함수를 지정한다:
| <!DOCTYPE html> <html> <body> <p>버튼을 클릭하여 좌표를 확인합니다.</p> <button onclick="getLocation()">위치 찾기</button> <p id="demo"></p> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "위도: " + position.coords.latitude + "<br>경도: " + position.coords.longitude; } 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; } } </script> </body> </html> |
위의 코드를 실행하면 아래 화면이 출력이 된다. 오류코드가 나지 않고 정상출력이 되었다
HTML 위치 관련 특정 정보
이 페이지에서는 지도에서 사용자의 위치를 표시하는 방법을 시연했다.
지리 위치는 다음과 같은 위치별 정보에도 매우 유용하다:
- 최신 지역 정보
- 사용자 근처에 관심 지점 표시
- 턴 바이 턴 내비게이션(GPS)
getCurrentPosition() 메소드 - 반환 데이터
getCurrentPosition() 메서드는 성공 시 개체를 반환한다. 위도, 경도 및 정확도 속성은 항상 반환된다. 사용 가능한 경우 다른 속성이 반환된다:
| 속성 | 반환값 |
| coords.latitude | 십진수로 표시되는 위도(항상 반환됨) |
| coords.longitude | 경도(십진수)(항상 반환됨) |
| coords.accuracy | 위치의 정확도(항상 반환됨) |
| coords.altitude | 평균 해수면보다 높은 고도(미터 단위)(사용 가능한 경우 반환됨) |
| coords.altitudeAccuracy | 위치의 고도 정확도(사용 가능한 경우 반환됨) |
| coords.heading | 북쪽에서 시계 방향으로 도를 표시하는 표제(사용 가능한 경우 반환됨) |
| coords.speed | 속도(미터/초)(사용 가능한 경우 반환됨) |
| timestamp | 응답 날짜/시간(사용 가능한 경우 반환됨) |
위치 오브젝트(Geolocation Object)
Geolocation 객체에는 다른 흥미로운 방법도 있다:
watchPosition() - 사용자의 현재 위치를 반환하고 사용자가 이동할 때(차량의 GPS처럼) 업데이트된 위치를 계속 반환한다.
clearWatch() - watchPosition() 메서드를 중지한다.
아래 예제에서는 watchPosition() 메서드를 보여 줍니다. 다음을 테스트하려면 정확한 GPS 장치가 필요하다(예: 스마트폰):
| <!DOCTYPE html> <html> <body> <p>버튼을 클릭하여 좌표를 확인합니다.</p> <button onclick="getLocation()">위치 찾기</button> <p id="demo"></p> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML="위도: " + position.coords.latitude + "<br>경도: " + position.coords.longitude; } </script> </body> </html> |
아래 그림은 위의 코드를 실행한 결과 화면이다.
이상입니다
HTML에서 위치 관련 정보를 찾고 관리하는 등의 함수와 속성값에 대해서 간략히 살펴보았다.
위의 실습은 간단한 것이다. 꼭 실습하기를 추천한다.
모두 화이팅입니다!!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 웹 스토리지 API(HTML Web Storage API) (0) | 2023.06.25 |
|---|---|
| HTML Drage and Drop API (0) | 2023.06.24 |
| HTML 유튜브(Youtube) (0) | 2023.06.22 |
| HTML 플러그인(Plug-ins) (0) | 2023.06.21 |
| HTML 오디오(Audio) (0) | 2023.06.20 |
댓글