Geolocation API는 navigator.geolocation을 통해 접근합니다. 이 때, 사용자의 브라우저는 위치 정보 접근 권한을 요청하게 되고, 사용자가 허가할 경우 현재 장치에서 사용 가능한 최선의 방법(GPS, WiFi, ...)을 통해 위치를 알아냅니다.
- MDN
위에 나온 설명처럼 navigator.geolocation
의 getCurrentPosition()
을 이용하면 사용하는 기기의 GPS 또는 WIFI로 현재 위치를 가져올 수 있다. getCurrentPostion
의 콜백 함수로는 success
와 error
가 있다.
예시)
navigator.geolocation.getCurrentPosition(success, error);
success
콜백 함수의 입력 매개변수로는 position을 받고, 이 안에는 coords = { latitude, longitude }
가 있다.
나는 해당 API를 이용하여 currentPos
state에 좌표 값을 저장했다. 혹시라도 API가 현재 위치를 가져오지 못하면 error
콜백 함수를 이용하여 알릴 수 있는 방법이 있다.
그리고 watchPosition(success, error)
이라는 함수도 있는데 실시간으로 현재 위치가 바뀌면 success
콜백 함수를 실행해준다.
앞서 사용했던 Geocoding API
와 반대로 동작하는 API이다. 파라미터로 위도, 경도 좌표 값을 주면 해당되는 위치의 주소를 받을 수 있다. 그래서 받은 주소를 하나의 문자열로 붙여 리턴하는 reverseGeocoding
함수를 만들었다.
그리고 현재 위치를 받은 다음에 바로 이 API를 호출하여 현재 위치에 가까운 주소를 starting
state에 저장했다. starting
state는 출발지를 입력하는 input의 value로 등록되어 있기 때문에 받은 주소를 바로 확인할 수 있다.
react-naver-maps
모듈은 네이버에서 배포한 것은 아니고 React의 컴포넌트 구조를 이용하여 Naver Maps API를 쓸 수 있게 어떤 개발자가 만들어 놓았다. 어떻게 동작하는지 궁금해서 써보기로 했다.
사용하는 방법은 해당 패키지의 문서를 확인하면 쉽게 알 수 있다. 간단하게 Marker
컴포넌트를 이용해 liveData
state에 저장된 따릉이 정류소를 표시해보았다.
일단 단순하게 currentPos
를 NaverMapWithMarkers
컴포넌트의 props로 주면 currentPos
state가 바뀔 때마다 알아서 지도를 리렌더링 한다.