카카오 지도 API 현재 위치 좌표로 주소 얻어내기(NextJs)

개요

프로젝트 진행중 좌표값으로 주소를 얻어낼 수 있는 기능을 구현하는 겸 기록도 같이 해보려고 한다. 카카오 지도 공식문서를 활용 했고, 간단한 기능이였지만 sample의 코드가 생각보다 복잡하고, 자바스크립트로 되어 있어서 시간이 걸렸지만 Docs에서 기능을 찾아보니 너무 간단하게 되어 있어서 쉽게 해결했다. 코드를 확인해 보자.

 

공식 문서

 

✅︎ new kakao.maps.services.Geocoder()

주소-좌표간 변환 서비스 객체를 생성한다.

var geocoder = new kakao.maps.services.Geocoder();

 

 

 

geocoder의 Constructor를 이용해서 아래 4개의 메서드를 사용할 수 있다.

나는 구 주소 및 도로명 주소와 행정동, 법정동 주소를 얻을 수 있는

coord2Address, coord2RegionCode를 설명해 보겠다.

 

 

 

✅︎ 내 현재 위치 좌표 얻는 방법

 

좌표를 얻기에 앞서 내 현재 위치의 좌표를 알아야 하기 때문에 내 현재 위치 좌표를 얻는 방법부터 간단하게 설명하려고 한다.

아래의 설명과 코드를 참고 하자.

 

1. nextJs 사용으로 useEffect() 안에서 사용함
2. geolocation을 이용해서 현재 위치의 lat과 lng을 얻을 수 있음
3. 얻은 위치 좌표를 myLocation이라는 state에 담아서 활용(전역으로 사용하기 위해 recoil 사용)

4. 공식문서 보기

const [myLocation, setMyLocation] = useRecoilState(myLocationState);

useEffect(() => {
    if (typeof window !== "undefined" && window.kakao && window.kakao.maps) {
      kakao.maps.load(() => {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition((position) => {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            setMyLocation((prev) => ({
              ...prev,
              center: { lat, lng },
              isLoading: false,
            }));
          });
        }
      });
    }
  }, []);

 

 

✅︎ coord2Address(x, y, callback, options)

 

좌표 값에 해당하는 구 주소와 도로명 주소 정보를 요청한다.
도로명 주소는 좌표에 따라서 표출되지 않을 수 있다.

var geocoder = new kakao.maps.services.Geocoder();

var coord = new kakao.maps.LatLng(37.56496830314491, 126.93990862062978);
var callback = function(result, status) {
    if (status === kakao.maps.services.Status.OK) {
        console.log('그런 너를 마주칠까 ' + result[0].address.address_name + '을 못가');
    }
};

geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);

 

 

 

공식문서 Docs에서 제공하는 좌표값으로 주소 정보를 얻어올 수 있는 방법이다.

하지만 우리는 내 현재 위치 좌표의 주소를 얻어야 하기 때문에 코드를 수정해야 한다.

아래 코드를 확인해 보자.

 

 

 

적용된 코드

  const myLocaion = useRecoilValue(myLocationState);
  const [myAddress, setMyAddress] = useRecoilState<string>(myAddressState);

  useEffect(() => {
    if (
      typeof window !== "undefined" &&
      window.kakao &&
      window.kakao.maps &&
      window.kakao.maps.services
    ) {
      let geocoder = new kakao.maps.services.Geocoder();
      //geocoder를 이용해 coord2Address 메서드 사용
      var coord = new kakao.maps.LatLng(myLocaion.center.lng, myLocaion.center.lat);
      //변수 coord 좌표값에 나의 현재 위치 좌표 사용
      let updateAddressFromGeocode = function (result, status) {
        if (status === kakao.maps.services.Status.OK) {
          setMyAddress(result[0].address_name); // 얻은 주소를 state에 담아서 사용
          console.log(result[0].address_name); // expected output : 구 주소, 도로명 주소
          // [0] 배열의 0번째를 사용하는 이유는 2개의 주소를 반환할 때도 있기 때문에
        }
      };
      geocoder.coord2Address(
        coord.getLat(),
        coord.getLng(),
        updateAddressFromGeocode
      ); // 함수 실행
    }
  }, [myLocaion]);

 

 

 

console.log(result)

 

 

 

✅︎ coord2RegionCode(x, y, callback, options)

좌표 값에 해당하는 행정동, 법정동 정보를 얻는다.

var geocoder = new kakao.maps.services.Geocoder();

var callback = function(result, status) {
    if (status === kakao.maps.services.Status.OK) {

        console.log('지역 명칭 : ' + result[0].address_name);
        console.log('행정구역 코드 : ' + result[0].code);
    }
};

geocoder.coord2RegionCode(126.9786567, 37.566826, callback);

 

 

 

적용된 코드

  const myLocaion = useRecoilValue(myLocationState);
  const [myAddress, setMyAddress] = useRecoilState<string>(myAddressState);

  useEffect(() => {
    if (
      typeof window !== "undefined" &&
      window.kakao &&
      window.kakao.maps &&
      window.kakao.maps.services
    ) {
      let geocoder = new kakao.maps.services.Geocoder();
      //geocoder를 이용해 coord2RegionCode 메서드 사용
      let updateAddressFromGeocode = function (result, status) {
        if (status === kakao.maps.services.Status.OK) {
          setMyAddress(result[0].address_name); // 얻은 주소를 state에 담아서 사용
          console.log(result[0].address_name) // expected output: 행정동, 법정동 주소
          // [0] 배열의 0번째를 사용하는 이유는 2개의 주소를 반환할 때도 있기 때문에
        }
      };
      geocoder.coord2RegionCode(
        myLocaion.center.lng,
        myLocaion.center.lat,
        updateAddressFromGeocode
      ); // 내 현재 위치의 좌표를 넣어주고 함수 실행
    }
  }, [myLocaion]);

 

 

 

console.log(result)

 

 

 

마무리

공식문서를 보기 싫어하는 사람과 공식문서를 어려워 하는 사람에게 이 글이 도움 되었으면 한다. 사실 이 글은 나를 위한 글이다. 카카오 지도 api를 활용해서 프로젝트를 진행하면서 그래도 계속 새로운걸 많이 써보려고 한다. 많이 공부하고 적용해 보면서 사용한 것들을 많이 기록 해야겠다.