도로명주소

다음 도로명 주소 API 연동

도로명 주소, 5자리 우편번호 참 다양한 시도(?)를 하긴 하는데 잦은 행정변화에 맞추어 대응하는것은 피곤한 일 같습니다. 여기에 한줄기 빛이 있습니다.

사이트 관리자분들께선 다음 도로명주소API 연동을 하시면 우편번호에대한 스트레스는 말끔히 사라질거라 예상해봅니다. 연동하는것 방법도 매우 간단하여 편합니다.

기존 사이트에 우편번호를 검색을 필요로하는 페이지가 있을겁니다. 저는 쇼핑몰 주문서 작성페이지,주문수정 페이지 그리고 회원가입폼에서 필요했습니다.

1. 문서에 아래 경로로 스크립트 링크를 겁니다.

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>

2.우편번호 찾기 이벤트에 해당 API 함수를 구현해줍니다.

해당객체 생성.open();

new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
            // 예제를 참고하여 다양한 활용법을 확인해 보세요.
        }
 }).open();

이게 끝입니다. SCRIPT 오류없이 다음 도로명 검색 주소 팝업창이 뜨면 완료입니다.

실제 적용할때는 기존문서의 찾기 이벤트에 걸어줘야겠죠? 아래와 같습니다.

<!-- 문서내 우편번호 찾기 이미지 입니다. -->

<img src="../img/btn_zip.gif" id="btnzip" width="29" height="19" border="0" align="absmiddle">

script에서는

//이미지를 클릭하면

  $("#btnzip").click(function(){
          var width = 500; //다음 주소창 팝업의 너비
          var height = 600; //다음 주소창 팝업의 높이
          new daum.Postcode({
            oncomplete: function(data) {
                var fullAddr = ''; // 최종 주소 변수
                var extraAddr = ''; // 조합형 주소 변수
                // 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    fullAddr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    fullAddr = data.jibunAddress;
                }
                // 사용자가 선택한 주소가 도로명 타입일때 조합한다.
                if(data.userSelectedType === 'R'){
                    //법정동명이 있을 경우 추가한다.
                    if(data.bname !== ''){
                        extraAddr += data.bname;
                    }
                    // 건물명이 있을 경우 추가한다.
                    if(data.buildingName !== ''){
                        extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                    }
                    // 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
                    fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
                }
                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('zipcode').value = data.zonecode; //5자리 기초구역번호 사용
                document.getElementById('address').value = fullAddr;
                // 커서를 상세주소 필드로 이동한다.
                document.getElementById('address_sub').focus();
            }
        }).open({
                        left: (window.screen.width / 2) - (width / 2),
                        top: (window.screen.height / 2) - (height / 2)
                        });
    });

oncomplete : 는 사용자가 우편번호 검색후 해당우편번호 주소를 클릭하면 발생하는 콜백 입니다. 이곳에

해당우편번호(data.zonecode) 일반주소(fullAddr)이 리턴 됩니다. 이값을 적절한곳에 셋팅해주면 됩니다.

상세 API 함수및 사용법은 http://postcode.map.daum.net/guide  요기를  참고하세요

하단 캡쳐 이미지처럼 iframe을 이용하여 레이어로 띄우거나 지도와 함께 보여줄 수 있는 예제도 guide 페이지에 나와있습니다.