Closed Hyeonjeong-JANG closed 1 month ago
input에 latitude, longitude 숨겨놓았다.
... 생략 <div class="form-group form-floating m-3 mx-auto"> <input type="text" name="address" class="form-control" id="storeAddress" value="부산광역시" required> <label for="storeAddress">주소</label> <div class="post-code d-flex justify-content-start"> <input type="text" class="form-control" id="postcode" placeholder="우편번호"/> <input type="button" class="search-btn btn btn-outline-primary" onclick="execDaumPostcode()" value="우편번호 찾기"/> </div> <div class="address"> <div class="d-flex justify-content-start"> <input type="text" class="form-control" id="roadAddress" placeholder="도로명주소"/> <input type="text" class="form-control" id="detailAddress" placeholder="상세주소"/> </div> <div> <input type="text" class="form-control" id="jibunAddress" placeholder="지번주소"/> <span id="guide" style="color: #999; display: none"></span> <input type="text" class="form-control" id="extraAddress" placeholder="참고항목"/> </div> </div> <input type="hidden" name="latitude" id="latitude" /> <input type="hidden" name="longitude" id="longitude" /> </div> ...생략
주소 api에서 받은 주소를 기반으로 좌표를 찾아서 그 값이 가입 폼에 입력되게 했다.
function getCoordinates(address) { console.log("주소로 좌표를 찾습니다:", address); if (typeof daum === 'undefined' || typeof daum.maps === 'undefined' || typeof daum.maps.services === 'undefined') { console.error("Kakao Maps API가 로드되지 않았습니다. API 키와 네트워크 상태를 확인하세요."); return; } var geocoder = new daum.maps.services.Geocoder(); geocoder.addressSearch(address, function(result, status) { if (status === daum.maps.services.Status.OK) { var coords = new daum.maps.LatLng(result[0].y, result[0].x); console.log("위도: " + coords.getLat()); console.log("경도: " + coords.getLng()); document.getElementById('latitude').value = coords.getLat(); document.getElementById('longitude').value = coords.getLng(); } else { console.error("주소 검색에 실패했습니다: " + status); } }); }
✔️ 회원가입 시 입력된 주소 기반으로 경도, 위도 받기
🐯 join-form.mustache
input에 latitude, longitude 숨겨놓았다.
🐯joinForm.js
주소 api에서 받은 주소를 기반으로 좌표를 찾아서 그 값이 가입 폼에 입력되게 했다.
⚒️ 가입 시 status값이 false로 들어가는 부분 수정함.
👻 결과