9oj0e / pathorder_server

3 stars 4 forks source link

feat: 매장 회원가입 시 경도, 위도 받기 #78

Closed Hyeonjeong-JANG closed 1 month ago

Hyeonjeong-JANG commented 1 month ago

✔️ 회원가입 시 입력된 주소 기반으로 경도, 위도 받기

🐯 join-form.mustache

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>
...생략

🐯joinForm.js

주소 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);
            }
        });
    }

⚒️ 가입 시 status값이 false로 들어가는 부분 수정함.

image

👻 결과

image