[Javascript / API] 카카오맵 API 연동으로 로드뷰 및 로드뷰 마커 표시하기('panoId 값이 없습니다' 에러 포함)

기본 맵으로 처리하는 것도 좋지만, 로드 뷰를 통해서 기본 맵의 부족한 점을 보완할 수 있다면 더 좋을 것이다.

 

그래서 기존 프로젝트에 로드뷰를 추가해보기로 했고, 카카오맵API 문서에서 제공하는 방식과는 조금 다르게 적용해야 했기에 해당 부분을 정리할 겸 작성해보려고 한다.

 

 

▼▼▼ 기본 맵 출력은 아래 글에서 확인할 수 있다.

 

[Javascript / HTML5] 카카오맵 API 연동으로 좌표 및 마커 표시하기 A to Z (에러 포함)

 

 

[ 구현 방법 ]

 

◆ 로드뷰, 로드뷰 마커 구현하기

 

편의상 전체 코드를 먼저 작성하고, 각 부분을 개별적으로 설명하고자 한다.

 

<!-- JSP/HTML -->
<div>
    <table>
    	<colgroup>
            <col style="width:40%;">
            <col style="width:40%;">
            <col style="width:18%;">
        </colgroup>
    	<tr>
            <td>
            	<input type="text" id="lat" placeholder="위도"/>
            </td>
            <td>
            	<input type="text" id="lon" placeholder="경도"/>
            </td>
            <td>
            	<button type="button" onclick="viewRoadview()">로드 뷰 보기</button>
            </td>
        </tr>
    </table>
    <div id="divRoad" style="width:500px; height:400px;"></div>
</div>

<!-- javascript -->
viewRoadview = () => {
	const lat = $('#lat').val();	//위도 좌표
	const lon = $('#lon').val();	//경도 좌표
	
	/** 로드뷰 생성 **/
	const roadviewContainer = document.getElementById('divRoad');
	const roadview = new kakao.maps.Roadview(roadviewContainer);
	const roadviewClient = new kakao.maps.RoadviewClient();
	
	const position = new kakao.maps.LatLng(lat, lon);
	
        //좌표(position) 정보에서 가장 가까운 로드뷰 정보 출력
	roadviewClient.getNearestPanoId( position, 50, (panoId) => {
		if(panoId == null) {
			alert('로드뷰 정보가 없는 지역입니다.');
			return;
		}else roadview.setPanoId(panoId, position);
	});
	
        //로드뷰 초기화 이벤트 추가(마커 출력 이벤트를 위해 작성)
	kakao.maps.event.addListener(roadview, 'init', function() {
    	    //마커 셋팅
	    const rMarker = new kakao.maps.Marker({position: position, map: roadview});
	    //마커를 로드뷰에 출력
	    rMarker.setMap(roadview);
        
            //마커가 로드뷰의 중앙에 오도록 로드뷰의 viewpoint 조정
	    const projection = roadview.getProjection();
	    const viewpoint = projection.viewpointFromCoords(rMarker.getPosition(), rMarker.getAltitude());
	    roadview.setViewpoint(viewpoint);
	});
}

 

반응형

 

대부분의 코드가 간단하고 API 문서와 유사하여 이해하기에 어렵지 않지만, 2가지 다른 부분이 있다.

 

1. getNearestPanoId 메소드에 대한 예외처리를 포함한다.

 

getNearestPanoId는 세 개의 파라미터를 받는다.

첫번째는 좌표, 두번째는 반경(meter 단위), 세번째는 콜백함수이다.

 

즉, 위의 코드에서는 position으로 설정된 위도와 경도 값을 받고,

해당 위도/경도에서 제일 가까운 로드뷰 정보가 있는지 반경 50m 이내로 조회하고,

로드뷰ID (panoId) 가 없으면 얼럿창을 출력하고, 있으면 로드뷰에 설정하여 출력해준다.

 

※ 만약, panoId에 대해 null 값 예외처리를 해주지 않으면, 다음과 같은 에러코드를 만나게 될 것이다.

 

Uncaught (in promise) panoId 값이 없습니다. panoId가 null인지 확인하시기 바랍니다.

 

반응형

 

해당 에러는 해당 반경 내에 로드뷰 정보가 없다는 뜻이다.

 

해결을 위해서 메소드의 2번째 인자인 반경값을 50m에서 증가시켜도 되지만, 그렇게 처리할 경우 오차범위가 발생한다.

또한, 마커 사용 시에는 오차로 인해 마커가 보이지 않는 문제가 발생할 수 있다.

그렇기 때문에 반경은 낮게 설정하고 null은 따로 예외처리를 해주는 것이 좋을 것이다.

 

 

2. 마커를 로드뷰에 출력하는 부분이 다르다.

 

API 문서에서는 마커와 인포윈도우를 같이 처리하여 출력하기 때문에,

마커만 표시하고 싶은 경우 헷갈릴 수 있다.

 

그래서 구글링을 한 결과, 로드뷰의 마커도 기본맵에서 마커를 출력했던 방식과 유사하게 출력할 수 있다는 것을 확인할 수 있었다.

 

즉, 위의 코드에서 rMarker 변수를 처리한 방식과 같이 처리가 가능하며,

마커의 포지션과 맵을 설정해주고, setMap 메소드를 통해 rMarker를 roadview에 출력하면 된다.

 

 

이렇게 로드뷰와 로드뷰 마커 출력 기능을 구현할 수 있다!

 

🤞 도움이 되셨기를 바랍니다. 한 번의 클릭과 댓글은 어딘가의 누군가에게 진실로 큰 힘이 됩니다. 🐱‍🏍