STS3 쇼핑몰 프로젝트[5] 주소록 API 연동

순서

1. 외부 스크립트 파일 연결 코드 추가

2. 주소 검색 기능 메서드 추가

3. 다음 주소 팝업창 코드 추가

4. 주소 입력창과 메서드 연결

5. 테스트

6. 주소 입력 예제 코드 추가

7. 테스트

1. 외부 스크립트 파일 연결 코드 추가

 다음 주소록 API를 사용하기 위해 join.jsp에 외부 스크립트 파일을 연결하는 코드를 추가합니다.

<!-- 주소 API 가져오기 -->
<script src=http://dmaps.daum.net/map_js_init/postcode.v2.js?autoload=false></script>

2. 주소 검색 기능 메서드 추가

주소 API 기능을 사용하기 위한 메서드를 추가합니다. 이름은 execPostCode로 정했습니다.

/* 다음 주소 연동 */
function execPostCode(){
    
}

3. 다음 주소 팝업창 코드 추가

 메서드 내용에 주소를 검색하는 팝업창을 띄우는 코드를 추가합니다. (다음 주소 API 홈페이지에 있습니다. )

<script>   
	function execPostCode() {
	     daum.postcode.load(function() {
	        new daum.Postcode({
	           oncomplete : function(data) {
	              // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
	               
	        }).open();
	      });
	   }
</script>

4. 주소 입력창과 메서드 연결

주소 입력창을 클릭할 시 추가한 메서드가 실행이 되도록 onclick속성을 추가하고, 값을 앞에서 추가한 execPostCode()를 넣습니다. 

// 수정 전
<div class="input-box">
	<span class="details">주소</span>
	<input id="colFormLabelLg3" name="address" placeholder="주소를 입력하세요." required class="address_input1">
</div>

// 수정 후
<div class="input-box">
	<span class="details">주소</span>
	<input id="colFormLabelLg3" onclick="execPostCode();" name="address" placeholder="주소를 입력하세요." required class="address_input1">
</div>

5. 테스트

주소 입력 창 클릭 시 팝업창 등장

6. 주소 입력 예제 코드 추가

다음 주소 API 설명 홈페이지에 주소 팝업창을 선택하여 주소 필드에 입력을 하기 위한 예제 코드들이 있습니다. 자신에게 맞는 예제 코드를 복사하여 추가해줍니다. 

<!-- 주소 API 가져오기 -->
	<script src=http://dmaps.daum.net/map_js_init/postcode.v2.js?autoload=false></script>
	<script>   
	   function execPostCode() {
	      daum.postcode.load(function() {
	         new daum.Postcode({
	            oncomplete : function(data) {
	               // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
	               
	               // 각 주소의 노출 규칙에 따라 주소를 조합
	               // 내려오는 변수가 값이 없을 땐 공백('')값을 가지므로, 이를 참고
	               var addr = ''; // 주소 변수
	               
	               // 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져옴
	               if(data.userSelectedType == 'R'){
	                  // 사용자가 도로명 주소를 선택했을 경우
	                  addr = data.roadAddress;
	               } else {
	                  // 사용자가 지번 주소를 선택했을 경우
	                  addr = data.jibunAddress;
	               }
	               
	               // 주소 정보를 해당 필드에 넣음.
	               document.getElementById('colFormLabelLg3').value = addr;
	               
	               // 커서를 주소 필드로 이동
	               document.getElementById("colFormLabelLg3").focus();
	               
	            }
	         }).open();
	
	      });
	   }
	</script>

7. 테스트

주소 입력 창 클릭 후 찾고자 하는 주소 입력합니다.

해당 주소를 클릭합니다.