다음API 활용 도로명주소 우편번호 검색 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

다음(DAUM)에서 제공하는 Open API 활용하기


우편번호 검색창을 아래의 내용을 참고해서 변경합니다.
다음 API 의 특징은 id 값으로만 검색결과를 가져와서 적용할수 있다는 것입니다.
즉, form 요소로 사용되는 name 정보만 사용하는 것으로 설정하면 된다는 것이죠.


1. 우편번호(5) + 도로명주소

<input type="text" name="postcode" id="postcode" style="width:100px;" value="">
<a href="#" onclick="openDaumPostcode();"><img src="btn_zip.gif" alt="우편번호 검색"></a><br>
<input type="text" name="addr1" id="addr" value="" title="도로명주소" style="width:99%">
<input type="text" name="addr2" id="addr2" value="" title="상세주소" style="width:99%">
<input type="hidden" name="jibeon" id="jibeon" value="" title="지번주소" style="width:99%">

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script><!-- http:// 이용시 -->
<!--<script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>--><!-- https:// 이용시 -->

<!-- PHP 일때
<?php if($_SERVER['HTTPS'] === "on"){ ?><script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>
<?php } else { ?><script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script><?php } ?>
-->

<!-- ASP 일때
<% nowprotocol = Request.ServerVariables("HTTPS")
if nowprotocol = "off" then %><script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<% else %><script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script><% end if %>
-->

<script>
    function openDaumPostcode() {
        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('postcode').value = data.zonecode; //5자리 새우편번호 사용
                document.getElementById('addr').value = fullAddr;

                // 커서를 상세주소 필드로 이동한다.
                document.getElementById('addr2').focus();
            }
        }).open();
    }
</script>



2. 우편번호(3+3) + 도로명주소 + 참고항목
 2020년 3월 9일 이후로는 3+3 우편번호 데이터 사용이 불가능합니다

<input type="text" name="zip1" value="" id="postcode1" title="우편번호 앞자리" class="frm_input readonly" size="3" maxlength="3"> -
<input type="text" name="zip2" value="" id="postcode2" title="우편번호 뒷자리" class="frm_input readonly" size="3" maxlength="3">
<input type="button" onclick="openDaumPostcode()" value="우편번호 찾기" style="width:100px; height:25px; font-size:11px; background-color:#ECECEC"><br>
<input type="text" name="addr1" value="" id="addr1" placeholder="주소" class="frm_input readonly" style="width:60%">
<input type="text" name="addr2" value="" id="addr2" placeholder="상세주소" class="frm_input" style="width:38%">

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script><!-- http:// 이용시 -->
<!--<script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>--><!-- https:// 이용시 -->

<!-- PHP 일때
<?php if($_SERVER['HTTPS'] === "on"){ ?><script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>
<?php } else { ?><script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script><?php } ?>
-->

<!-- ASP 일때
<% nowprotocol = Request.ServerVariables("HTTPS")
if nowprotocol = "off" then %><script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<% else %><script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script><% end if %>
-->

<script>
    function openDaumPostcode() {
        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("postcode1").value = data.postcode1; //  (2020년 3월 9일 이후로는 데이터가 내려가지 않습니다.)
                document.getElementById("postcode2").value = data.postcode2; //  (2020년 3월 9일 이후로는 데이터가 내려가지 않습니다.)
                document.getElementById("addr1").value = fullAddr;

                // 커서를 상세주소 필드로 이동한다.
                document.getElementById("addr2").focus();
            }
        }).open();
    }
</script>





참고사이트
http://postcode.map.daum.net/guide
https://spi.maps.daum.net/postcode/guidessl