SonMan's IT BBS: Daum Open Api - 우편번호 검색 달기

2014년 12월 3일 수요일

Daum Open Api - 우편번호 검색 달기

예전에는 주소 검색을 할때, 자체적으로 구현했었다.
그게 관리하기도 편하고, 한번 작업해 놓으면 그다지 바뀔일도 없어서, 기존에 쓴 소스를 계속 쓰면 되니까, 그다지 문제 될게 없었다.

근데... 요즘은 좀 문제가 되는게...

일단 도로명 주소가 문제다.
이제는 도로명 주소검색이 기본적으로 지원이 되어야 하고, 거기다 기존 주소 검색도 없으면 또 안되니까...

그 2가지 기능을 구현해 놓는것도 문제지만, 주소 데이터가 기존 주소 데이터만으로도 제법 되는데, 도로명 주소까지 해놓으면 제법 상당한 데이터가 된다.
당연히 검색하는데도 제법 시간이 걸린다.

그래서 요즘은 그냥 Open Api 를 활용해 주소 검색을 처리한다.
뭐... 외부 시스템을 쓴다는게 약간 찜찜한게 없는건 아니지만, 괜히 쓸데 없는데 공수를 투입하는것 보다 쓸수 있는게 있다면 쓰는게 났다.

하여간, 주소 검색 Open Api 는 제법 있지만, 나의 경우는 그 중에서 제일 쓰기 쉬운 Daum 의 Open Api 를 이용한다.

쓰는 법은 ....

<div id="addlayer" style="display:none;border:5px solid;position:fixed;width:400px;height:500px;left:50%;margin-left:-155px;top:50%;margin-top:-235px;overflow:hidden;-webkit-overflow-scrolling:touch;">
<img src="//i1.daumcdn.net/localimg/localimages/07/postcode/320/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px" onclick="closeDaumPostcode()" alt="닫기 버튼">
</div>

<script src="http://dmaps.daum.net/map_js_init/postcode.js"></script>
<script>
    // 우편번호 찾기 iframe을 넣을 element
    var element = document.getElementById('addlayer');

    function closeDaumPostcode() {
        // iframe을 넣은 element를 안보이게 한다.
        element.style.display = 'none';
    }

    function showDaumPostcode() {
        // iframe을 넣은 element를 보이게 한다.
        element.style.display = 'block';

        new daum.Postcode({
            oncomplete: function (data) {
                // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
                // 우편번호와 주소 및 영문주소 정보를 해당 필드에 넣는다.
                document.getElementById('<%= strHomePost1.ClientID %>').value = data.postcode1;
                document.getElementById('<%= strHomePost2.ClientID %>').value = data.postcode2;
                document.getElementById('<%= strHomeAddr1.ClientID %>').value = data.address;
                // iframe을 넣은 element를 안보이게 한다.
                element.style.display = 'none';
                return;
            },
            width: '100%',
            height: '100%'
        }).embed(element);

    }
</script>

를 소스에 추가하고....

       <span>
                                <a href="javascript:showDaumPostcode();"><img src="../images/member/btn_zip.gif" border="0"alt="우편번호"></a>
       </span>

로 버튼 클릭을 만들어 놓으면 된다.

그러면....