#4 Geolocation API로 현재 위치 가져오기

2eoseo·2021년 4월 10일
1

Geolocation API

Geolocation API는 navigator.geolocation을 통해 접근합니다. 이 때, 사용자의 브라우저는 위치 정보 접근 권한을 요청하게 되고, 사용자가 허가할 경우 현재 장치에서 사용 가능한 최선의 방법(GPS, WiFi, ...)을 통해 위치를 알아냅니다.
- MDN

위에 나온 설명처럼 navigator.geolocationgetCurrentPosition()을 이용하면 사용하는 기기의 GPS 또는 WIFI로 현재 위치를 가져올 수 있다. getCurrentPostion의 콜백 함수로는 successerror가 있다.

예시)

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 모듈은 네이버에서 배포한 것은 아니고 React의 컴포넌트 구조를 이용하여 Naver Maps API를 쓸 수 있게 어떤 개발자가 만들어 놓았다. 어떻게 동작하는지 궁금해서 써보기로 했다.

사용하는 방법은 해당 패키지의 문서를 확인하면 쉽게 알 수 있다. 간단하게 Marker 컴포넌트를 이용해 liveData state에 저장된 따릉이 정류소를 표시해보았다.

네이버 지도 currentPos를 중심으로 이동

일단 단순하게 currentPosNaverMapWithMarkers 컴포넌트의 props로 주면 currentPos state가 바뀔 때마다 알아서 지도를 리렌더링 한다.

문제점

  • input에 뭔가 쓸 때마다 네이버 지도가 리렌더링 된다.

0개의 댓글