카카오지도 관련 질문 드립니다.

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
카카오지도 관련 질문 드립니다.

QA

카카오지도 관련 질문 드립니다.

본문

아래처럼 지도를 생성했는데요 글쓰기 에서 주소를 검색하고 검색한 주소가 지도로 표시되게 할려면

어떻게 해야되는지고수님들 조언 좀 부탁드립니다.

 

<div id="map" style="width:100%;height:500px;"></div>

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

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

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

// 주소로 좌표를 검색합니다
geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {

    // 정상적으로 검색이 완료됐으면
     if (status === kakao.maps.services.Status.OK) {

        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
            map: map,
            position: coords
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new kakao.maps.InfoWindow({
            content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
        });
        infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
    }
});   
</script>

<!-- 로드뷰를 표시할 div 입니다 -->

<div id="roadview" style="width:100%;height:500px;"></div>

<script>
var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
var roadview = new kakao.maps.Roadview(roadviewContainer); //로드뷰 객체
var roadviewClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체

var position = new kakao.maps.LatLng(33.450701, 126.570667);

// 특정 위치의 좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄운다.
roadviewClient.getNearestPanoId(position, 50, function(panoId) {
    roadview.setPanoId(panoId, position); //panoId와 중심좌표를 통해 로드뷰 실행
});
</script>

</div>

이 질문에 댓글 쓰기 :

답변 2

아래처럼 지도를 생성했는데요 글쓰기 에서 주소를 검색하고 검색한 주소가 지도로 표시 하게  를 질문 내용을 토대로 하자면..  우선 input 창 하나 만들고 폼을 서브밋하면 데이터가 geocoder.addressSearch('주소', .....);  

이부분에 들어와야 하잖아요 여기를 document.getElementById('인풋아이디').value 이부분을 addressSearch 내부에 넣어서 활용하면 되지 않을까요? 제이쿼리로 표현 하면 $('#아이디').val() 이걸 addressSearch 내부에 넣으면 되요 

어쨌든 한번 연구해보세요 

주소검색해서 입력란에 들어오는것 까지는 되는데요 지도에 출력하질 못하네요
릴보이즈님 스크립트한번만 꼼꼼히 봐주세요 부탁합니다.

//주소검색해서 상세주소 넣는 부분 입니다.

<div class="bo_w_info write_div">

<label for="wr_1" class="sound_only">상세주소</label><button id="postcodify_search_button">주소검색클릭</button><br />
<input type="text" name="wr_1" value="<?=$write['wr_1']?>" id="wr_1" class="frm_input full_input postcodify_jibeon_address postcodify_details" size="50" maxlength="255" placeholder="상세주소">
</div>

//클리하면 팝업검색창을 띄워서 주소를 검색 합니다.

<!-- jQuery와 Postcodify를 로딩한다 -->
<script src="//ajax.kakaomapsapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>

<!-- "검색" 단추를 누르면 팝업 레이어가 열리도록 설정한다 -->
<script> $(function() { $("#postcodify_search_button").postcodifyPopUp(); }); </script>

//지도 전체 스크립트 입니다.

<div id="map" style="width:100%;height:500px;"></div>

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

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

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

// 주소로 좌표를 검색합니다
geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {

// 정상적으로 검색이 완료됐으면
    if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

 // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
            map: map,
            position: coords
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new kakao.maps.InfoWindow({
            content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
        });
        infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
    }

}); 
 </script>

<!-- 로드뷰를 표시할 div 입니다 -->

<div id="roadview" style="width:100%;height:500px;"></div>

<script>
 var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
 var roadview = new kakao.maps.Roadview(roadviewContainer); //로드뷰 객체
var roadviewClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체

var position = new kakao.maps.LatLng(33.450701, 126.570667);

// 특정 위치의 좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄운다.
roadviewClient.getNearestPanoId(position, 50, function(panoId) {
    roadview.setPanoId(panoId, position); //panoId와 중심좌표를 통해 로드뷰 실행
});
 </script>

input 태그를 하나 만드시구요.


<input type="text" id="search_map" placeholder="장소를 검색해보세요." />

 

"geocoder.addressSearch" 이부분을 지우시던가 하시고

아래 내용을 스크립트에 추가해주세요.

인풋 입력 후 엔터를 치면 해당 주소로 마커표시가 되구요.

버튼으로 하시든 하시면 될것 같습니다.


$("#serach_map").keydown((e) => {
    if (e.keyCode == 13) {
        search_map(this.value);    
    }
});
 
// 주소로 좌표를 검색합니다
function search_map(VALUE) {
    geocoder.addressSearch(VALUE, function(result, status) {
    
        // 정상적으로 검색이 완료됐으면
         if (status === kakao.maps.services.Status.OK) {
            var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
    
            // 결과값으로 받은 위치를 마커로 표시합니다
            var marker = new kakao.maps.Marker({
                map: map,
                position: coords
            });
    
            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
            map.setCenter(coords);
        }
    });
}

 

위에가 어려우시면, 카카오 예제를 해보세요.

https://apis.map.kakao.com/web/sample/keywordList/

답변을 작성하시기 전에 로그인 해주세요.
전체 0
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT