geolocation으로 현재위치 받고 카카오 API에 넘겨줘서 주소까지 받아오기

카카오 공식홈페이지를 보고 금방 사용할 수 있을 줄 알았지만 리액트에서 사용하는 예시는 나와있지 않아서 구글의 바다를 오랫동안 헤엄치다 겨우 구현했다.

 

'주소 검색하기' 기능인데, 먼저 Geolocation API를 통해 좌표를 얻어낸 후, axios를 사용하여 url 파라미터에 좌표를 입력한 후 get 요청을 보내면 응답으로 현재 주소를 받는다.

 

Geolocation API

구글크롬에서 다음과 같이 위치 액세스를 허용해야 사용할 수 있다.

사용자의 현재 위치를 지도에 표시하거나 위치 기반 개인화 정보 제공, 웹 앱에서 위치 정보를 가져와야 하는 경우 사용한다.

Geolocation API는 navigator.geolocation을 통해 접근한다. 이 때, 사용자의 브라우저는 위치 정보 접근 권한을 요청하고(위 사진)

사용자가 허락하면 현재 장치에서 GPS,Wifi 등을 통해 위치를 알아낸다.

 

Geolocation.getCurrentPosition( )

사용법

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(position) {
  //좌표를 알아낼 수 있는데, 여기서 알아낸 좌표를 kakaoAPI url에 사용할 것이다.
  console.log('위도 : ' + position.coords.latitude); 
  console.log('경도: ' + position.coords.longitude);
};

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};

navigator.geolocation.getCurrentPosition(success, error, options);

KaKao API 사용

https://developers.kakao.com/docs/latest/ko/local/dev-guide

    function onGeoOk(position){
        const lat = position.coords.latitude;
        const lon = position.coords.longitude;
        
        //kakao REST API에 get 요청을 보낸다.
        //파라미터 x,y에 lon,lat을 넣어주고 API_KEY를 Authorization헤더에 넣어준다.
        axios.get(`https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${lon}&y=${lat}&input_coord=WGS84`
        ,{headers:{Authorization:`KakaoAK ${process.env.REACT_APP_REST_API}`}}
        )
        .then(res=>{
            console.log(res.data.documents)
            dispatch(changeRegion(res.data.documents[0].address.region_1depth_name))
            dispatch(changeCity(res.data.documents[0].address.region_2depth_name)) 
        }
        ).catch(e=>console.log(e))
    }
    function onGeoError(){
        alert("위치권한을 확인해주세요");
    }
  

	//navigator.geolocation.getCurrentPosition(위치받는함수, 에러났을때 함수)
	navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError)

카카오 개발자 홈페이지에 예시로 나와있는 좌표를 파라미터 x,y에 입력했을때, 다음과 같이 콘솔로그 된다.