Geolocation API
개념과 사용법
사용자의 현재 위치를 지도에 표시하거나 위치 기반 개인화 정보를 제공하는 등, 웹 앱에서 위치 정보를 가져와야 하는 경우가 종종 있습니다.
Geolocation API는 navigator.geolocation을 통해 접근합니다. 이 때, 사용자의 브라우저는 위치 정보 접근 권한을 요청하게 되고, 사용자가 허가할 경우 현재 장치에서 사용 가능한 최선의 방법(GPS, WiFi, ...)을 통해 위치를 알아냅니다.
위의 과정이 끝난 후, 코드에서는 몇 가지 다른 방법으로 위치 정보를 가져올 수 있습니다.
- Geolocation.getCurrentPosition(): 장치의 현재 위치를 가져옵니다.
- Geolocation.watchPosition(): 장치의 위치가 바뀔 때마다, 자동으로 새로운 위치를 사용해 호출할 처리기 함수를 등록합니다.
두 메서드 모두 최대 세 개의 매개변수를 받습니다.
- 필수로 지정하는 성공 콜백: 위치 정보를 성공적으로 가져온 경우, 위치 데이터를 담은 GeolocationPosition 객체를 유일한 매개변수로 하여 콜백을 호출합니다.
- 선택적으로 지정하는 실패 콜백: 위치 정보를 가져오지 못한 경우, 실패 원인을 담은 GeolocationPositionError 객체를 유일한 매개변수로 하여 콜백을 호출합니다.
- 선택적으로 지정하는 PositionOptions 객체는 위치 정보 회수에 적용할 옵션을 제공합니다.
출처: developer.mozilla.org/ko/docs/Web/API/Geolocation_API
Geolocation API
Geolocation API는 사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API입니다. 개인정보 보호를 위해, 브라우저는 위치 정보를 제공하기 전에 사용자에게 위치 정보 권한에 대한 �
developer.mozilla.org
활용
<script>
const successCallback = (position)=> {
let current_latitude = position.coords.latitude
let current_longitude = position.coords.longitude
alert ('현재위도: ' + current_latitude + ', 현재경도: ' + current_longitude)
}
const errorCallback = (error) => {
console.log(error)
}
function getLocation() {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
}
</script>
</head>
<body>
<h1>현재위치 가져오기</h1>
<button onclick="getLocation()">허용</button>
이제 이 가져온 위도와 경도 데이터를 가지고 지도에 마킹하거나, 위치를 기반으로 근처의 서비스를 제공하는 등으로 활용이 될 수 있다.
'Programming diary' 카테고리의 다른 글
| 21. October 22, 2020 (0) | 2020.10.22 |
|---|---|
| 20. October 18, 2020 (0) | 2020.10.18 |
| 18. October 11, 2020 (0) | 2020.10.11 |
| 17. October 7, 2020 (0) | 2020.10.07 |
| 16. October 4, 2020 (0) | 2020.10.04 |
