다음주소API 사용하기(우편번호서비스)

안녕하세요. 클로스트입니다. ^-^

오늘은 다음주소 API 사용하기에 대해서 포스팅하겠습니다.

이게 원래 명칭은 우편번호 서비스 인데 우편번호 수집도 하지만

주소수집도 굉장히 편해서 사람들이 많이 쓰고 있습니다.

 

공식 홈페이지 주소입니다.

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

 

위 주소에 가면 다양한 API 사용방법을 익힐 수 있습니다.

 

간편하게 사용법을 알려드리면

우선 js 라이브러리를 추가합니다.

 

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

 

한줄이면 끝납니다.

 

그리고 보통 주소를 받을 인풋 태그 3개가 필요합니다.

우편번호, 기본주소, 상세주소 이렇게 3가지를 유저로 부터 입력을 받게 됩니다.

 

 

     function execDaumPostcode() {         new daum.Postcode({             oncomplete: function(data) {                 // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.                  // 도로명 주소의 노출 규칙에 따라 주소를 조합한다.                 // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.                 var fullRoadAddr = data.roadAddress; // 도로명 주소 변수                 var extraRoadAddr = ''; // 도로명 조합형 주소 변수                  // 법정동명이 있을 경우 추가한다. (법정리는 제외)                 // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.                 if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){                     extraRoadAddr += data.bname;                 }                 // 건물명이 있고, 공동주택일 경우 추가한다.                 if(data.buildingName !== '' && data.apartment === 'Y'){                    extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);                 }                 // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.                 if(extraRoadAddr !== ''){                     extraRoadAddr = ' (' + extraRoadAddr + ')';                 }                 // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.                 if(fullRoadAddr !== ''){                     fullRoadAddr += extraRoadAddr;                 }                  // 우편번호와 주소 정보를 해당 필드에 넣는다.                 document.getElementById('zip').value = data.zonecode; //5자리 새우편번호 사용                 document.getElementById('addr1').value = fullRoadAddr;                 document.getElementById('addr2').focus();             }         }).open();     } 

 

 

이렇게 라이브러리와 함수만 추가해주시면 사용 할 준비는 끝난거에요.

 

함수 호출만 해주면 팝업으로 뜨게되고, 클릭하면 해당값이 우편번호와, 기본주소에 들어가게 됩니다.

나머지 상세주소는 유저로 부터 입력을 받으면 되구요.

다음주소 API를 띄워야 할 곳에

execDaumPostcode();

이 함수만 호출해 주시면 팝업으로 뜨게 됩니다.

 

 

 

이 팝업 여러 사이트에서 자주 보셨을거에요.

팝업말고도 다른방법으로도 띄우는것도 가능하고

영문으로 받는것도 가능하고요.

API 문서 참조하시면 여기서 변형하는 것은 어렵지 않아요. ㅎㅎ