인생을 바꾸는 기록

다음 우편번호 API(daum postcode api) 본문

Javascript Tip

다음 우편번호 API(daum postcode api)

phantom03 2018. 7. 11. 10:31

안녕하세요. 이번 포스팅은 다음 우편번호 API(daum postcode api) 에 대한 내용입니다.

1.다음 우편번호 API(daum postcode api)

다음에서 지원하는 우편번호 API 입니다.

해당 API는 따로 API KEY를 발급을 안받고 사용이 가능한 API 입니다.

현재 daum api 에 대한 내용을 볼수 있는 사이트는 아래와 같습니다.


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



2. 예제

daum api 예제 입니다.
제가 보기에는 아래에서 guide 부분을 안써도 될것 같다고 생각되어 집니다.
그래서 저는 document.getElementById('guide').innerHTML 이부분에 해당 하는 부분을 주석 처리 했습니다.
사용 하실 분들은 주석을 지우고 사용하세요.

참고로 http://dmaps.daum.net/map_js_init/postcode.v2.js 이파일을 로컬에 저장해서 사용할 수 없다고 하네요.
저도 로컬에 저장해서 사용할려다 안되서 그냥 저주소로 해서 불러 와서 쓰고 있답니다.


<input type="text" id="sample4_postcode" placeholder="우편번호">

<input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample4_roadAddress" placeholder="도로명주소">
<input type="text" id="sample4_jibunAddress" placeholder="지번주소">
<span id="guide" style="color:#999"></span>

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
    //본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
    function sample4_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('sample4_postcode').value = data.zonecode; //5자리 새우편번호 사용
                document.getElementById('sample4_roadAddress').value = fullRoadAddr;
                document.getElementById('sample4_jibunAddress').value = data.jibunAddress;

                // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
                /* if(data.autoRoadAddress) {
                    //예상되는 도로명 주소에 조합형 주소를 추가한다.
                    var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
                    document.getElementById('guide').innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';

                } else if(data.autoJibunAddress) {
                    var expJibunAddr = data.autoJibunAddress;
                    document.getElementById('guide').innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';

                } else {
                    document.getElementById('guide').innerHTML = '';
                } */
            }
        }).open();
    }
</script>



'Javascript Tip' 카테고리의 다른 글

naver smarteditor 한글 깨짐  (0) 2019.07.10
naver smarteditor display:none 문제 focus 안됨  (1) 2019.04.08
인스타그램 api  (0) 2018.08.06