다음api를 이용한 우편번호 연동

안녕하세요.

 

쇼핑몰 사이트를 운영할려면 가장 기본이자 필수인 우편번호 연동입니다. 

옛날엔 직접 DB를 가지고 사용했던 기억이 있는데(벌써 10년도 넘었네요...) 요즘은 보통 api 쓰시죠?

다음 api 연동방법입니다. 

 

참고 

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

Daum 우편번호 서비스

1

. 다음api 키 발급받기.

감사하게도 다음은 api 키를 발급 받을 필요가 없습니다.

다음카카오 복 받으세요 :) 

 

2. 사용 코드

<script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>  <-- https 일 때 

 

daum.postcode.load(function(){

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('sel_company_zipcode').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('sel_company_add1').value = fullRoadAddr;
//document.getElementById('sel_company_add2').value = data.jibunAddress;
$("#sel_company_add2").focus();


}
}).open();

});

 

 

3. script  

http 사이트 에서는 

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

 

https 사이트 에서는 

<script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>

 

다른 url 을 호출해 사용해야 문제가 없더라구요.