카카오 오픈 API 출처 : apis.map.kakao.com/web/sample/addr2coord/
- 카카오 API를 사용했고 스트크립트 파일을 따로 만들면 적용이 안돼서 html에 다시 하나를 만들었음.
- 로컬저장해서 톰캣을 사용해 서버를 통하지 않았고, repl.it이라는 온라인 개발환경의 오픈서버를 통해 카카오의 API 키를 받고 주소 팝업을 이용해 지도를 띄울 수 있게함.
* 중요 : Javascript 키가 적용이 안돼 Admin키로 바꾸니 지도가 나오게 되었음.
// HTML + JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원가입 유효성 검사 정규식</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<body>
<form id = "sm"name="pej" method="post" onsubmit="return allCheck()" action="mailto:dwdw1566@naver.com">
<table align=cneter>
<tr bgcolor="blanchedalmond" > <!-- 첫줄 -->
<td align = "center" colspan="2" style = "color:black" >회원 기본 정보</td>
</tr>
<tr bgcolor="white"> <!-- 2 -->
<td>아이디:</td>
<td><input type="text" id="_id" size=12 maxlength=12> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr> <!-- 3 -->
<td>비밀번호:</td>
<td><input type="text" id="_pw" size=12 maxlength=12> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr> <!-- 4 행-->
<td>비밀번호확인:</td>
<td><input type="text" id="_pw2" size=12 maxlength=12></td>
</tr>
<tr> <!-- 5 -->
<td>메일주소:</td>
<td><input type="text" id="_mail" size=15> 예) id@domain.com</td>
</tr>
<tr> <!-- 6 -->
<td>이름:</td>
<td><input type="text" id="_name" size=15 maxlength=4></td>
</tr>
<tr bgcolor="blanchedalmond" > <!-- 첫줄 -->
<td align = "center" colspan="2" style = "color:black" >개인 신상 정보</td>
</tr>
<tr>
<th>
<div align = "left">지도</div>
</th>
<td align="center">
<div id="map" style="width:400px;height:300px;display:none"></div>
</td>
</tr>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=99427f5672ef2f0e69950c7f58b16cfb&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표
level: 5 // 지도의 확대 레벨
};
//지도를 미리 생성
var map = new daum.maps.Map(mapContainer, mapOption);
//주소-좌표 변환 객체를 생성
var geocoder = new daum.maps.services.Geocoder();
//마커를 미리 생성
var marker = new daum.maps.Marker({
position: new daum.maps.LatLng(37.537187, 127.005476),
map: map
});
function addrFind() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraAddr !== ''){
extraAddr = ' (' + extraAddr + ')';
}
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("tbox4").value = extraAddr;
} else {
document.getElementById("tbox4").value = '';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('tbox1').value = data.zonecode;
document.getElementById("tbox2").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("tbox3").focus();
geocoder.addressSearch(data.address, function(results, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var result = results[0]; //첫번째 결과의 값을 활용
// 해당 주소에 대한 좌표를 받아서
var coords = new daum.maps.LatLng(result.y, result.x);
// 지도를 보여준다.
mapContainer.style.display = "block";
map.relayout();
// 지도 중심을 변경한다.
map.setCenter(coords);
// 마커를 결과값으로 받은 위치로 옮긴다.
marker.setPosition(coords)
}
});
}
}).open();
}
</script>
<tr>
<td>주소</td> <!-- zib코드 입력-->
<td><input type="text" id="tbox1" placeholder="우편번호" size=8>
<input type="button" onclick="addrFind()" value="우편번호 찾기"><br>
<input type="text" id="tbox2" placeholder="주소" size=28><br>
<input type="text" id="tbox4" placeholder="참고항목" size=28>
<input type="text" id="tbox3" placeholder="상세주소">
</td>
</tr>
<tr> <!-- 7 -->
<td>주민등록번호:</td>
<td><input type="text" id="_ju" size=15 minlength=13 maxlength=13> 예) 1234561234567</td>
</tr>
<tr> <!-- 8 -->
<td>생일:</td>
<td>
<input type="text" id="birth" size=5 maxlength=12>년
<select id="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>월
<select id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>일
</td>
</tr>
<tr> <!-- 9 -->
<td>관심분야:</td>
<td>
<input type="checkbox" name="com">컴퓨터
<input type="checkbox" name="com">인터넷
<input type="checkbox" name="com">여행
<input type="checkbox" name="com">영화감상
<input type="checkbox" name="com">음악감상
</tr>
<tr> <!-- 9 -->
<td>자기소개:</td>
<td><textarea id="my_intro" cols="55" rows="5" maxlength="700"></textarea></td>
</tr>
</table>
<br>
<blockquote><blockquote><blockquote><blockquote><blockquote>
<input type="submit" value="회원 가입">
<input type="reset" value="다시입력">
</form>
</body>
</html>
반응형
'자바과정 > 자바스크립트' 카테고리의 다른 글
| 바닐라 자바스크립트 시작 (0) | 2021.09.07 |
|---|---|
| API 간단 설명과 카카오 API 사용 방법 (0) | 2021.03.04 |
| 회원가입 유효성 검사 (비정규식과 정규식) (0) | 2021.03.04 |
| 카카오 우편번호 서비스 API (0) | 2021.03.04 |
| 자바스크립트 실습(계산기) (0) | 2021.03.02 |
댓글