주소 검색 결과로 위도 및 경도 좌푯값 구하기

들어가기 전에

맨 아래 '마치며' 섹션에 주소 검색 기능을 통해 바로 위도 및 경도를 확인할 수 있는 사이트를 만들어 링크를 걸어두었습니다.

필요하신 분은 아래 링크로 들어가서 자유롭게 이용해 주세요 :)

 

개요

개발을 하다 보면 지도를 만들고 주소를 지도에 표현해야 할 일이 자주 생긴다.

그러기 위해서는 주소 정보를 통해 위도 및 경도를 구해서 그 값들을 통해 지도 라이브러리와 연동을 해야 한다.

 

구하고자 하는 주소가 우편번호 서비스에서 가져오는 등 명확한 주소일 때에는 문제가 되지 않겠지만,

명확하지 않은 주소인 경우 위도 및 경도를 제대로 구할 수 없는 경우가 발생할 수 있다.

 

필자도 프로젝트에 참여하는 각 기관의 명단을 시스템에 업로드할 때,

명단 내의 주소가 오타가 있거나 광역 자치단체명을 생략하는 등 주소값이 정확하지 않아서 위도 및 경도를 제대로 불러오지 못하는 경우가 꽤 발생하여 그런 경우 추가적으로 확인하여 주소를 수정하고 위도 및 경도 값을 구해야 했다.

 

구글링을 해보았을 때 구글 지도에서 우클릭을 해서 좌표를 찾거나 정확한 지도를 직접 입력해야만 좌푯값을 주는 사이트가 있기는 했지만,

필자가 원하는 기능은 주소 검색 기능을 사용해서 나온 결괏값에 위도와 경도 좌푯값이 같이 출력되는 기능이었는데 그런 목적으로 사용하기에 만족할 만한 사이트가 존재하지 않았다.

 

그래서 기존 프로젝트에서 비슷한 로직으로 위도와 경도를 구해서 시스템에 녹였던 경험을 되살려 직접 만들어서 사용하기로 결정했다.

 

개발 시작

주소 검색

필자는 인터넷에서 주소를 검색하거나 프로젝트에 주소 검색 기능을 적용할 때 다음 우편번호 서비스를 주로 사용한다.

가장 보편화되어있고 연동도 쉬우며 주소의 정보를 정확하게 확인할 수 있다는 특징이 있다.

https://postcode.map.daum.net/guide

Daum 우편번호 서비스

script 태그를 적용하고 기능을 추가해보자.

여기서는 iframe을 이용하여 페이지에 끼워 넣기 방식으로 작업했다.

<div id="wrap" style="border:1px solid;width:500px;height:300px;margin:5px 0;position:relative"></div>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
  // 우편번호 찾기 화면을 넣을 element
  const element_wrap = document.getElementById('wrap');

  const daumPostcode = () => {
    new daum.Postcode({
      oncomplete: data => {
        console.log('도로명주소 : ' + data.roadAddress);
        console.log('지번주소 : ' + data.jibunAddress);
        console.log('우편번호 : ' + data.zonecode);
      },
      // 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다.
      onresize: size => {
        element_wrap.style.height = size.height + 'px';
      },
      width: '100%',
      height: '100%'
    }).embed(element_wrap, {autoClose: false});
  }

  daumPostcode();
</script>

 

위도 및 경도 좌푯값 구하기

다음 우편번호 서비스를 연동하면 주소의 다양한 정보들을 가져올 수 있지만,

아쉽게도 위도와 경도 값은 존재하지 않는다.

따라서 우편번호 서비스를 통해 정확한 주소를 가져오고,

그 주소로 좌푯값을 구하는 API를 추가로 연동해야 한다.

 

kakao maps API의 Geocoder를 이용해 해당 기능을 구현해 보자.

https://apis.map.kakao.com/web/documentation/#services_Geocoder
카카오에서 막아둔건지 위 링크는 배너 적용이 되지 않는다..

먼저 kakao developers에 로그인하고,

내 애플리케이션 > 애플리케이션 추가하기를 통해 프로젝트를 생성한다.

이후 우리는 웹 사이트에 기능을 구현할 예정이므로 앱 설정 > 플랫폼의 Web 부분에서 사이트 도메인을 등록해야 한다.

 

필자는 github page로 호스팅을 했기 때문에 개인 github 도메인과 테스트할 localhost 도메인을 등록했다.

이후 앱 키 메뉴로 들어가 JavaScript 키를 가지고 위도 및 경도 찾기 기능을 구현해 보자.

주소가 1:N인 경우에는 데이터가 공백으로 들어갈 수 있다.
이를 방지려면 autoMapping false 설정을 추가하면 된다.

<div id="wrap" style="border:1px solid;width:500px;height:300px;margin:5px 0;position:relative"></div>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey={JavaScript 키}&libraries=services"
        type="text/javascript"></script>
<script>
  // 우편번호 찾기 화면을 넣을 element
  const element_wrap = document.getElementById('wrap');

  const daumPostcode = () => {
    autoMappingRoad: false, // 도로명 주소 없는 경우 방지
    // autoMappingJibun: false, // 지번 주소 없는 경우 방지
    // autoMapping: false, // 위 두 속성을 한번에 설정
    new daum.Postcode({
      oncomplete: data => {
        console.log('도로명주소 : ' + data.roadAddress);
        console.log('지번주소 : ' + data.jibunAddress);
        console.log('우편번호 : ' + data.zonecode);

        // 위도 및 경도 좌푯값 구하기
        const geocoder = new kakao.maps.services.Geocoder();
        geocoder.addressSearch(data.roadAddress, (result, status) => {
          if (status === kakao.maps.services.Status.OK) {
            console.log('위도 : ' + result[0].y);
            console.log('경도 : ' + result[0].x);
          }
        });
      },
      // 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다.
      onresize: size => {
        element_wrap.style.height = size.height + 'px';
      },
      width: '100%',
      height: '100%'
    }).embed(element_wrap, {autoClose: false});
  }

  daumPostcode();
</script>

 

마치며

저에게 꾸준히 필요했던 기능이었기 때문에 추가적으로 수정하여 주소 정보를 조회할 수 있는 사이트를 만들었습니다.

지도 확인 기능까지 추가했었지만 이미 우편번호 서비스에 지도 버튼이 있기에 불필요할 것 같아서 제거했고,

대신 주소를 클릭하면 결과를 바로 확인할 수 있도록 스크롤 이동 기능을 적용했습니다.

https://psh10066.github.io/get-address-info/

주소 정보 조회