반응형
도로명개발자 센터에서 제공하는 API 보다
다음 주소 API 가 훨씬 많이 쓰이고 쓰기가 편하다.
공식 페이지
https://postcode.map.daum.net/guide
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
사용법
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
// 예제를 참고하여 다양한 활용법을 확인해 보세요.
}
}).open();
</script>
적용 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
window.onload = function(){
document.getElementById("address_kakao").addEventListener("click", function(){ //주소입력칸을 클릭하면
//카카오 지도 발생
new daum.Postcode({
oncomplete: function(data) { //선택시 입력값 세팅
document.getElementById("address_kakao").value = data.address; // 주소 넣기
document.querySelector("input[name=address_detail]").focus(); //상세입력 포커싱
}
}).open();
});
}
</script>
<body>
<form action="register_form.php" method="post">
<table border="1" align="center" width="800" cellpadding="7"">
<tr>
<th>아이디</th>
<td><input type="text" name="id"></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<th>이름</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>이메일</th>
<td><input type="text" size="30" name="email"></td>
</tr>
<tr>
<th>주소</th>
<!-- <td><input type="text" size="80" name="address" id="address_kakao" readonly></td> -->
<td><input type="text" size="80" name="address" id="address_kakao" readonly></td>
</tr>
<tr>
<th>상세주소</th>
<td><input type="text" size="80" name="address_detail"></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<button type="submit">가입하기</button>
<!-- a 태그로는 form action 으로 감, button태그의 type을 없애면 form action 으로감
<a href="index.php"><button>돌아가기</button></a> -->
<button type="button" onclick="javascript:location.href='./index.php';">취소</button>
</td>
</tr>
</table>
<div style="text-align:center; padding-top:10px;">
</div>
</form>
</body>
</html>
적용 완료
반응형
'👨🏻💻Development > 💻Frontend' 카테고리의 다른 글
| ＆nbsp; ＆amp; ＆lt; ＆gt; ＆quot; 의미 (0) | 2022.09.04 |
|---|