[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
==================================================================
function openRoadView(id, _point) {
map.addOverlayMapTypeId(kakao.maps.MapTypeId.ROADVIEW);
var rvContainer = document.getElementById(id); //로드뷰를 표시할 div
var rv = new kakao.maps.Roadview(rvContainer); //로드뷰 객체
var rvClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체
var centerOfMap = map.getCenter();
var focus = centerOfMap;
//제일 처음에 로드뷰 버튼 클릭 시
toggleRoadview(focus);
var markImage = new kakao.maps.MarkerImage( );
var rvMarker = new kakao.maps.Marker({ // 드래그가 가능한 마커. 지도에 옮기며 로드뷰 시점 전환에 이용.
image: markImage, position: focus, draggable: true, map: map
});
kakao.maps.event.addListener(rvMarker, 'dragend', function (_mouseEvent) {
var position = rvMarker.getPosition(); // 현재 마커 위치 좌표
toggleRoadview(position); // 로드뷰 시점 변환.
});
// 지도 클릭 시 rvMarker 위치 변경, 로드뷰 시점 변환.
kakao.maps.event.addListener(map, 'click', function (mouseEvent) {
var position = mouseEvent.latLng;
rvMarker.setPosition(position);
console.log("클릭 이벤트")
toggleRoadview(position);
});
function toggleRoadview(position) {
// 전달받은 좌표(position)에 가까운 로드뷰의 panoId를 추출하여 로드뷰 표시.
rvClient.getNearestPanoId(position, 50, function (panoId) {
if (panoId === null) {
console.log("null")
rvContainer.style.display = 'none'; //로드뷰를 넣은 컨테이너를 숨깁니다
map.relayout();
} else {
console.log("nt null")
map.relayout(); // 지도를 감싸고 있는 영역이 변경됨에 따라, 지도를 재배열합니다
rvContainer.style.display = 'block'; // 로드뷰를 넣은 컨테이너를 보이게 합니다
rv.setPanoId(panoId, position); // panoId를 통한 로드뷰 실행
rv.relayout(); // 로드뷰를 감싸고 있는 영역이 변경됨에 따라, 로드뷰를 재배열합니다
}
});
}
return { marker: rvMarker}
}
로드뷰 실행 시 toggleRoadview() 실행이 되고
지도 클릭 또는 마커 이동 시 toggleRoadview() 실행 되어 로드뷰가 표시가 되는데
rv.setPanoId() 에 값들이 정상적으로 들어가고 있음에도 불구하고 로드뷰창이 회색화면으로 뜹니다.
근데 항상 안나오는게 아니라
로드뷰 on/off/on 동작을 했을때는 정상적으로 화면이 나올때가 있어 오류 원인을 찾고자 문의 남김니다.
