login register Sysop! about ME  

2020년 03월 18일 09시 03분 00초,     조회수 : 379
  제목 : 화면에서 출력되는 주소 정보를 form으로 넘기는 방법은?
SEQ : 24091 글쓴이 : autodoc

작성 포맷 : TEXT 모드, 자동 줄바꿈 사용

카카오에서 제공하는 '좌표로 주소를 얻어내기' 기능을 이용하여
휴대폰 등에서 제공되는 주소 좌표값(위도, 경도)을 읽으면 이에 해당하는 개략적인 주소를 데이터베이스에 저장하기 위하여 
form 형식으로 넘겨받아야 하는데...

현재 아래 카카오에서 제공하는 api 기준으로 지도 화면의 좌표 중앙점의 개략적인 주소를 화면에 출력해줍니다. (저는 사실 
다른 기능도 불필요하고 그냥 지도 중심점의 대략적인 주소만 넘겨받으면 됩니다.)
저는 이 주소를 form 형식으로 다른 페이지에 넘겨준 후 데이터베이스에 저장하려고 합니다.

원래 카카오 api 소스에서는 화면 출력용으로 <span id="centerAddr"></span>형태로 화면 출력은 되는데 이걸 form 형
식으로 넘겨받으려고 하니까 문제가 됩니다.

대략적인 구현은 아래와 같이 했습니다만 제대로 데이터가 넘어가지 않거나 undefined로 나오는데
새로운 기능의 자바스크립트만 구현해야 하면 변수와 함수마저 헷갈리고 헤매는게 제 실력인지라 정중히 전문가분의 도움을 
구합니다.


---- 페이지 mem_reg.asp

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?
appkey=17962054c43a2vvvvvv&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new kakao.maps.LatLng(37.566826, 127.9786567), // 지도의 중심좌표
        level: 1 // 지도의 확대 레벨
    };  

// 지도를 생성합니다    
var map = new kakao.maps.Map(mapContainer, mapOption); 

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();

var marker = new kakao.maps.Marker(), // 클릭한 위치를 표시할 마커입니다
    infowindow = new kakao.maps.InfoWindow({zindex:1}); // 클릭한 위치에 대한 주소를 표시할 인포윈도우입니다

// 현재 지도 중심좌표로 주소를 검색해서 지도 좌측 상단에 표시합니다
searchAddrFromCoords(map.getCenter(), displayCenterInfo);

// 지도를 클릭했을 때 클릭 위치 좌표에 대한 주소정보를 표시하도록 이벤트를 등록합니다
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
    searchDetailAddrFromCoords(mouseEvent.latLng, function(result, status) {
        if (status === kakao.maps.services.Status.OK) {
            var detailAddr = !!result[0].road_address ? '<div>도로명주소 : ' + 
result[0].road_address.address_name + '</div>' : '';
            detailAddr += '<div>지번 주소 : ' + result[0].address.address_name + '</div>';
            
            var content = '<div class="bAddr">' +
                            '<span class="title">법정동 주소정보</span>' + 
                            detailAddr + 
                        '</div>';

            // 마커를 클릭한 위치에 표시합니다 
            marker.setPosition(mouseEvent.latLng);
            marker.setMap(map);

            // 인포윈도우에 클릭한 위치에 대한 법정동 상세 주소정보를 표시합니다
            infowindow.setContent(content);
            infowindow.open(map, marker);
        }   
    });
});

// 중심 좌표나 확대 수준이 변경됐을 때 지도 중심 좌표에 대한 주소 정보를 표시하도록 이벤트를 등록합니다
kakao.maps.event.addListener(map, 'idle', function() {
    searchAddrFromCoords(map.getCenter(), displayCenterInfo);
});

function searchAddrFromCoords(coords, callback) {
    // 좌표로 행정동 주소 정보를 요청합니다
    geocoder.coord2RegionCode(coords.getLng(), coords.getLat(), callback);         
}

function searchDetailAddrFromCoords(coords, callback) {
    // 좌표로 법정동 상세 주소 정보를 요청합니다
    geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
}

// 지도 좌측상단에 지도 중심좌표에 대한 주소정보를 표출하는 함수입니다
function displayCenterInfo(result, status) {
    if (status === kakao.maps.services.Status.OK) {
        var infoDiv = document.getElementById('centerAddr');

        for(var i = 0; i < result.length; i++) {
            // 행정동의 region_type 값은 'H' 이므로
            if (result[i].region_type === 'H') {
                infoDiv = result[i].address_name;
                break;
            }
        }
    }
}

var centerAddr;

displayCenterInfo(result, status);

function join(){
    var form        = document.aform;
    document.aform.centerAddr1.value = centerAddr;
                
    var tt=1;

    if (tt==1) {
        form.submit();	    
        //return true;  
    }
}
</script>

<div class="map_wrap">
    <div id="map" style="width:100%;height:100%;position:relative;overflow:hidden;"></div>
    <div class="hAddr">

        <form name="aform" id="aform" action="mem_reg_ok.asp" method="post">
            <Input Type="hidden" name="centerAddr1" value="">        
            <a href="javascript:join();"><b> 회원가입 </b></a>
        </form>
    </div>
</div>


--------- mem_reg_ok.asp
<%centerAddr1 = noInject(request("centerAddr1"))
response.write "centerAddr1: " & centerAddr1 & "<br>"%>

  jhz358
  2020-03-19(16:55)
캐릭 이미지
'centerAddr' 의 값을 채우는 부분이 없는데 어디 부분에 서 채우시는 지요?
  autodoc
  2020-03-19(17:41)
var infoDiv = document.getElementById('centerAddr');

이 부분 아닌가요?

저도 api 내부 로직은 모르겠으나 말씀드린 바와 같이 카카오의 원래 소스인 <span
id="centerAddr"></span>를 html에 추가해서 화면에 출력해보면 정상으로 주소가 화
면에 출력되는건 확인했습니다.

  autodoc
  2020-03-19(17:44)
자바스크립트의 지도 부분은 제가 만든게 아니고 카카오 developer에서 단순 복사해서 붙
인 것입니다.

저는 여기에 그냥 form으로 넘기는 로직만 추가하려고 하는 것입니다.

카카오 api는 이용자에게 화면에 관련 정보를 보여주는 걸로 끝이지만 저는 목적상 이걸 디
비에 넘겨서 저장해야 하는 상황입니다.

  supercore
  2020-03-20(11:54)
캐릭 이미지
화면 출력용으로 <span id="centerAddr"></span>형태로 화면 출력 된다면..

function join(){
var joinForm = document.aform;
// centerAddr 값 체크
//if (joinForm.centerAddr1.value != document.getElementById("centerAddr").innerText) {
joinForm.centerAddr1.value = document.getElementById("centerAddr").innerText;

joinForm.submit();
//}
}



  autodoc
  2020-03-26(08:25)
supercore님, 해결되었습니다. 정말 감사합니다.

가장 핵심이 innerText인듯해서 덕분에 검색하고 조금 공부도 했습니다.

며칠간 헤매다가 자포자기로 안들어왔었는데... 제 실력 탓인데 정말 이리 쉽게 가이드해주
시니 무어라 감사드릴 말이 없습니다.

다시 한번 감사 드립니다.



제목 작성자 날짜 조회
화면에서 출력되는 주소 정보를 form으로 넘기는 방법은? (5) autodoc 2020-03-18 379

 
 
.NET과 Java 동영상 기반의 교육사이트

로딩 중입니다...

서버 프레임워크 지원 : NeoDEEX
based on ASP.NET 3.5
Creative Commons License
{5}
{2} 읽음   :{3} ({4})