웹개발 메모장

다음 우편번호 검색 초간단 예제

전체 자바스크립트 CSS PHP HTML 기타
URL : https://ktsmemo.cafe24.com/s/dev/314
등록일 :

다음 도로명 우편번호 검색

주소체계가 도로명 주소로 바뀐 후 우편번호 DB가 상당히 방대해지고 개발도 복잡해졌습니다.
하지만 다음에서 제공하는 주소검색 API를 사용하면 간단히 해결됩니다.

아래는 도로명 주소를 검색하는 초간단 소스입니다.
신)우편번호 5자리, 기본주소, 상세주소 입력이 되는 구성입니다.

우편번호 :
주소 :
상세 :

다음 스크립트 로딩

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

HTML

우편번호 : <input type="text" name="zip" style="width:80px; height:26px;" />
<button type="button" style="width:60px; height:32px;" onclick="openZipSearch()">검색</button><br>
주소 : <input type="text" name="addr1" style="width:300px; height:30px;" readonly /><br>
상세 : <input type="text" name="addr2" style="width:300px; height:30px;" />

자바스크립트

function openZipSearch() {
	new daum.Postcode({
		oncomplete: function(data) {
			$('[name=zip]').val(data.zonecode); // 우편번호 (5자리)
			$('[name=addr1]').val(data.address);
			$('[name=addr2]').val(data.buildingName);
		}
	}).open();
}

실행 가능한 소스

검색시 넘어오는 데이터값 참고

판교역로 235 로 검색 후 넘어온 값입니다. 값 참고용 정리입니다.
아래 파란색 항목은 위 예제에 사용한 값입니다.

address : "경기 성남시 분당구 판교역로 235"
addressEnglish : "235, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea"
addressType : "R"
apartment : "N"
autoJibunAddress : ""
autoJibunAddressEnglish : ""
autoRoadAddress : ""
autoRoadAddressEnglish : ""
bcode : "4113510900"
bname : "삼평동"
bname1 : ""
bname2 : "삼평동"
buildingCode : "4113510900106810000000001"
buildingName : "에이치스퀘어 엔동"
hname : ""
jibunAddress : "경기 성남시 분당구 삼평동 681"
jibunAddressEnglish : "681, Sampyeong-dong, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea"
postcode : "463-400"
postcode1 : "463"
postcode2 : "400"
postcodeSeq : "001"
query : "판교역로 235"
roadAddress : "경기 성남시 분당구 판교역로 235"
roadAddressEnglish : "235, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea"
roadname : "판교역로"
roadnameCode : "3179025"
sido : "경기"
sigungu : "성남시 분당구"
sigunguCode : "41135"
userLanguageType : "K"
userSelectedType : "R"
zonecode : "13494"


function openZipSearch() {
    new daum.Postcode({
          oncomplete: function(data) {
              $('[name=zip]').val(data.zonecode); // 우편번호 (5자리)
              $('[name=addr1]').val(data.address);
              $('[name=addr2]').val(data.buildingName);
          }
    }).open();
}