채택완료

카카오맵 로드뷰 질문 좀 드립니다.

2020-10-10 (토) 09:35:47 2,023

맨 아래 이미지처럼 위에는 일반지도 아래는 로드뷰인데요

일반지도는 주소변환하여 잘나오는데 로드뷰는 아무런 반응이 없어요ㅠ

<현재 뷰페이지 일반지도와 로드뷰 스크립트 입니다>"조언 좀 부탁드립니다"

<div>
   <div id="map" style="width:100%;height:350px;"></div>
<div id="roadview" style="width:100%;height:350px;"></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: 5 // 지도의 확대 레벨
    }; 

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

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

// 주소로 좌표를 검색합니다
geocoder.addressSearch("<?=$view['wr_1']?>",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);
    }
});

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>

978235327_1602290144.6508.jpg

|

답변 1개 / 댓글 4개

채택된 답변
+20 포인트
2020-10-10 (토) 17:03:22

로드뷰는 좌표 참조가 예제소스 그대로 인것 같습니다.

아래 소스를 참고해보세요

Copy
<div>

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

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

    </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: 5 // 지도의 확대 레벨

            };

 

        // 지도를 생성합니다   

        var map = new kakao.maps.Map(mapContainer, mapOption);

 

        var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div

        var roadview = new kakao.maps.Roadview(roadviewContainer); //로드뷰 객체

        var roadviewClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체

 

        // 주소-좌표 변환 객체를 생성합니다

        var geocoder = new kakao.maps.services.Geocoder();

        // 주소로 좌표를 검색합니다

        var geocoderCallback = function (result, status) {

            var latX, latY;

            // 정상적으로 검색이 완료됐으면

            if (status === kakao.maps.services.Status.OK && 0 < result.length) {

 

                if (1 === result.length) {

                    latX = result[0].x;

                    latY = result[0].y;

                } else {

                    console.log('1<', result); // 적절하게 예외처리

                }

 

                console.log(mapOption);

                var latlng = new kakao.maps.LatLng(latY, latX);

                // 결과값으로 받은 위치를 마커로 표시합니다

                var marker = new kakao.maps.Marker({

                    map: map,

                    position: latlng

                });

 

                // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다

                map.setCenter(latlng);

 

                var position = latlng;

 

                // 특정 위치의 좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄운다.

                roadviewClient.getNearestPanoId(position, 50, function (panoId) {

                    roadview.setPanoId(panoId, position); //panoId와 중심좌표를 통해 로드뷰 실행

                });

            } else {

                console.log('else', result)

            }

        }

        geocoder.addressSearch("서울 종로구 세종로 1-68", geocoderCallback);

    </script>

답변에 대한 댓글 4개

안되네요 어렵네요ㅠ
작동하는 소스입니다.
https://semo.pw/kko/
폴라베어님 감사합니다."꾸벅" 한가지만 여쭤볼게요

1. 이렇게는 안되는데
geocoder.addressSearch("<?=$view['wr_1']?>",function(result, status) {

2. 요로케 하닌까 되네요 ㅎㅎ
geocoder.addressSearch("<?=$view['wr_1']?>", geocoderCallback);

1. 번으로는 왜 안되는거에요 궁굼하네요 제가 초보라 ㅎㅎ ?
첨부한 소스는 1번처럼 익명함수로 하셔도 동일하게 작동합니다.
오탈자를 확인해보시기 바랍니다.

답변을 작성하려면 로그인이 필요합니다.