지도/로컬 API에 대한 문의게시판입니다.
현재 다음api로 로드뷰 사용중입니다.
기존에 사용 하던 로드뷰가 나오지않습니다. ( 로드뷰 - 회색 이미지 출력 )
// 객체 생성
rv = new daum.maps.Roadview(rvContainer);
rv.setPanoId(panoId, position);
position, panoId 모두 정상적으로 로그 찍히고, 에러로그는 없습니다…
원인을 찾지못하여 문의드립니다…
간단히 실행할 수 있는 전체 코드 부탁드립니다.
회색화면에서 뜨지 않는다면, 해당 파노아이디나 좌표에 해당하는 로드뷰데이터가 없다는 뜻입니다.
또는 이외 다른 이슈일 수도 있습니다.
만약 저희가 접근할 수 있는 URL이 있다면 그걸로 알려주셔도 좋습니다. 감사합니다.
------------------------- JS --------------------------------------------------------------
var rv;
var rvClient;
var rvMarker;
var rvContainer; // 로드뷰를 표시할 div 입니다
// 다음 로드뷰 설정 세팅
function initRoadView(){
rvContainer = document.getElementById('roadview');
// 로드뷰 객체를 생성합니다
rv = new daum.maps.Roadview(rvContainer);
// 좌표로부터 로드뷰 파노라마 ID를 가져올 로드뷰 클라이언트 객체를 생성합니다
rvClient = new daum.maps.RoadviewClient();
// 로드뷰에 좌표가 바뀌었을 때 발생하는 이벤트를 등록합니다
daum.maps.event.addListener(rv, 'position_changed', function() {
// 현재 로드뷰의 위치 좌표를 얻어옵니다
var rvPosition = rv.getPosition();
// 지도의 중심을 현재 로드뷰의 위치로 설정합니다
map.setCenter(rvPosition);
// 지도 위에 로드뷰 도로 오버레이가 추가된 상태이면
if(overlayOn) {
// 마커의 위치를 현재 로드뷰의 위치로 설정합니다
rvMarker.setPosition(rvPosition);
}
});
// 마커 이미지를 생성합니다
var markImage = new daum.maps.MarkerImage(
'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/roadview_wk.png',
new daum.maps.Size(35,39), {
// 마커의 좌표에 해당하는 이미지의 위치를 설정합니다.
// 이미지의 모양에 따라 값은 다를 수 있으나, 보통 width/2, height를 주면 좌표에 이미지의 하단 중앙이 올라가게
// 됩니다.
offset: new daum.maps.Point(14, 39)
});
// 드래그가 가능한 마커를 생성합니다
rvMarker = new daum.maps.Marker({
image : markImage,
position: initPosition,
draggable: true
});
// 마커에 dragend 이벤트를 등록합니다
daum.maps.event.addListener(rvMarker, 'dragend', function(mouseEvent) {
// 현재 마커가 놓인 자리의 좌표입니다
var position = rvMarker.getPosition();
console.log(position);
// 마커가 놓인 위치를 기준으로 로드뷰를 설정합니다
toggleRoadview(position);
});
}
// 지도 위의 로드뷰 버튼을 눌렀을 때 호출되는 함수입니다
function setRoadviewRoad() {
// 로드뷰 객체가 존재하지 않으면 플래시 플레이어 점검을 실시하고 객체를 객체를 초기화한다
if(!rv){
// 플래시 문제를 해결해야 할 부분
if(swfobject.hasFlashPlayerVersion("1"))
{
if(swfobject.hasFlashPlayerVersion("10.0"))
{
// 로드뷰 객체 초기화
initRoadView();
}else{
alert("플래시 플레이어의 버전이 10이상이어야 합니다.");
return;
}
}
else
{
alert("플래시 플레이어가 존재하지 않거나 비활성화 상태입니다.");
return;
}
}
var control = document.getElementById('roadviewControl');
// 버튼이 눌린 상태가 아니면
if (control.className.indexOf('active') === -1) {
control.className = 'active';
// 로드뷰 도로 오버레이가 보이게 합니다
toggleRvOverlay(true);
} else {
closeRoadview();
}
}
// 지도 위의 로드뷰 도로 오버레이를 추가,제거하는 함수입니다
function toggleRvOverlay(active) {
if (active) {
isOnRvOverlay = true;
// 지도 위에 로드뷰 도로 오버레이를 추가합니다
map.addOverlayMapTypeId(daum.maps.MapTypeId.ROADVIEW);
// 지도 위에 마커를 표시합니다
rvMarker.setMap(map);
// 마커의 위치를 지도 중심으로 설정합니다
rvMarker.setPosition(map.getCenter());
} else {
isOnRvOverlay = false;
// 지도 위의 로드뷰 도로 오버레이를 제거합니다
map.removeOverlayMapTypeId(daum.maps.MapTypeId.ROADVIEW);
// 지도 위의 마커를 제거합니다
rvMarker.setMap(null);
}
}
// 전달받은 좌표(position)에 가까운 로드뷰의 파노라마 ID를 추출하여
// 로드뷰를 설정하는 함수입니다
function toggleRoadview(position){
rvClient.getNearestPanoId(position, 50, function(panoId) {
// 파노라마 ID가 null 이면 로드뷰를 숨깁니다
if (panoId === null) {
toggleRvWrapper(false);
} else {
// panoId로 로드뷰를 설정합니다
rv.setPanoId(panoId, position);
}
});
}
------------------------------------- JSP -------------------------------------------------------------
<div id="rvWrapper">
<div id="roadview" style="width:100%;height:100%;"></div> <!-- 로드뷰를 표시할 div 입니다 -->
<div id="close" title="로드뷰닫기" onclick="closeRoadview()"><span class="img"></span></div>
</div>
입니다…
var rv;
var rvClient;
var rvMarker;
var rvContainer; // 로드뷰를 표시할 div 입니다
var initPosition = new kakao.maps.LatLng(33.450422139819736 , 126.5709139924533);
// 다음 로드뷰 설정 세팅
function initRoadView() {
rvContainer = document.getElementById('roadview');
// 로드뷰 객체를 생성합니다
rv = new daum.maps.Roadview(rvContainer);
// 좌표로부터 로드뷰 파노라마 ID를 가져올 로드뷰 클라이언트 객체를 생성합니다
rvClient = new daum.maps.RoadviewClient();
// 로드뷰에 좌표가 바뀌었을 때 발생하는 이벤트를 등록합니다
daum.maps.event.addListener(rv, 'position_changed', function () {
// 현재 로드뷰의 위치 좌표를 얻어옵니다
var rvPosition = rv.getPosition();
// 지도의 중심을 현재 로드뷰의 위치로 설정합니다
map.setCenter(rvPosition);
// 지도 위에 로드뷰 도로 오버레이가 추가된 상태이면
if (overlayOn) {
// 마커의 위치를 현재 로드뷰의 위치로 설정합니다
rvMarker.setPosition(rvPosition);
}
});
// 마커 이미지를 생성합니다
var markImage = new daum.maps.MarkerImage(
'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/roadview_wk.png',
new daum.maps.Size(35, 39), {
// 마커의 좌표에 해당하는 이미지의 위치를 설정합니다.
// 이미지의 모양에 따라 값은 다를 수 있으나, 보통 width/2, height를 주면 좌표에 이미지의 하단 중앙이 올라가게
// 됩니다.
offset: new daum.maps.Point(14, 39)
});
// 드래그가 가능한 마커를 생성합니다
rvMarker = new daum.maps.Marker({
image: markImage,
position: initPosition,
draggable: true
});
// 마커에 dragend 이벤트를 등록합니다
daum.maps.event.addListener(rvMarker, 'dragend', function (mouseEvent) {
// 현재 마커가 놓인 자리의 좌표입니다
var position = rvMarker.getPosition();
console.log(position);
// 마커가 놓인 위치를 기준으로 로드뷰를 설정합니다
toggleRoadview(position);
});
}
// 지도 위의 로드뷰 버튼을 눌렀을 때 호출되는 함수입니다
function setRoadviewRoad() {
// 로드뷰 객체가 존재하지 않으면 플래시 플레이어 점검을 실시하고 객체를 객체를 초기화한다
if (!rv) {
// 플래시 문제를 해결해야 할 부분
if (swfobject.hasFlashPlayerVersion("1")) {
if (swfobject.hasFlashPlayerVersion("10.0")) {
// 로드뷰 객체 초기화
initRoadView();
} else {
alert("플래시 플레이어의 버전이 10이상이어야 합니다.");
return;
}
}
else {
alert("플래시 플레이어가 존재하지 않거나 비활성화 상태입니다.");
return;
}
}
var control = document.getElementById('roadviewControl');
// 버튼이 눌린 상태가 아니면
if (control.className.indexOf('active') === -1) {
control.className = 'active';
// 로드뷰 도로 오버레이가 보이게 합니다
toggleRvOverlay(true);
} else {
closeRoadview();
}
}
// 지도 위의 로드뷰 도로 오버레이를 추가,제거하는 함수입니다
function toggleRvOverlay(active) {
if (active) {
isOnRvOverlay = true;
// 지도 위에 로드뷰 도로 오버레이를 추가합니다
map.addOverlayMapTypeId(daum.maps.MapTypeId.ROADVIEW);
// 지도 위에 마커를 표시합니다
rvMarker.setMap(map);
// 마커의 위치를 지도 중심으로 설정합니다
rvMarker.setPosition(map.getCenter());
} else {
isOnRvOverlay = false;
// 지도 위의 로드뷰 도로 오버레이를 제거합니다
map.removeOverlayMapTypeId(daum.maps.MapTypeId.ROADVIEW);
// 지도 위의 마커를 제거합니다
rvMarker.setMap(null);
}
}
// 전달받은 좌표(position)에 가까운 로드뷰의 파노라마 ID를 추출하여
// 로드뷰를 설정하는 함수입니다
function toggleRoadview(position) {
rvClient.getNearestPanoId(position, 50, function (panoId) {
// 파노라마 ID가 null 이면 로드뷰를 숨깁니다
if (panoId === null) {
toggleRvWrapper(false);
} else {
// panoId로 로드뷰를 설정합니다
rv.setPanoId(panoId, position);
}
});
}
initRoadView();
toggleRoadview(initPosition)
코드가 분할되어 있어서, 일단 하나로 합친다음에, 실행하는 부분을
initRoadview(), toggleRoadview(initPosition) 으로 해서 실행해 보았습니다.
initPosition은 값을 적어주시지 않아서, 지도API개발자사이트에 있는 샘플을 참고하였습니다.
이렇게 나오고 있습니다.
크롬 개발자 도구 콘솔에 별다른 오류가 안뜬다면,
로직상 로드뷰가 실행될 수 있는 코드가 실행이 되는지 확인해 주시고,
로드뷰가 삽입되는 본문의 CSS 스타일 중에, 전역으로 DOM태그에 특정 속성을 주고 있는지 확인 부탁드립니다.