Kakao
Maps API

검색하기
지도
오버레이
로드뷰
정적지도
라이브러리

로드뷰에 이미지 올리기

로드뷰에 이미지를 올릴 수 있습니다. 로드뷰에 이전 거리 사진을 올려 현재 로드뷰와 비교할 수 있습니다.

로드뷰에 아래 이미지를 올려보겠습니다.

직접 해보기

Javascript

var img = document.createElement('img');
img.id = 'overlayImg';
img.src = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/roadviewoverlay_img_02.png';

var rvContainer = document.getElementById('roadview'); // 로드뷰를 표시할 div
var rv = new kakao.maps.Roadview(rvContainer); // 로드뷰 객체 생성
var rc = new kakao.maps.RoadviewClient(); // 좌표를 통한 로드뷰의 panoid를 추출하기 위한 로드뷰 help객체 생성 
var rvPosition = new kakao.maps.LatLng(37.572743, 126.977228);

rc.getNearestPanoId(rvPosition, 50, function(panoid) {
    rv.setPanoId(panoid, rvPosition);//좌표에 근접한 panoId를 통해 로드뷰를 실행합니다.
});

// 로드뷰 초기화 이벤트
kakao.maps.event.addListener(rv, 'init', function() {
    
    //로드뷰의 viewpoint값을 적절하게 이동시킵니다.
    rv.setViewpoint( new kakao.maps.Viewpoint( 300, -7, 3 ) );

    //커스텀 오버레이를 로드뷰 위에 올립니다.
    new kakao.maps.CustomOverlay({
        map: rv,
        position:  new kakao.maps.Viewpoint(299.7, -7.6),
        content: img
    });
});

Javascript + HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>로드뷰에 이미지 올리기</title>
    <style>
    #overlayImg {
        width: 394px;
        height: 242px;
        border: 1px solid #096320;
        transition: linear 0.5s opacity;
    }
    #overlayImg:hover {
        opacity: 0;
    }
</style>
</head>
<body>
<p style="margin-top: -12px;">
    로드뷰에 아래 이미지를 올려보겠습니다.<br>
    <img src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/roadviewoverlay_img_02.png">
</p>
<div id="roadview" style="width:600px;height:600px"></div> <!-- 로드뷰를 표시할 div 입니다 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var img = document.createElement('img');
img.id = 'overlayImg';
img.src = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/roadviewoverlay_img_02.png';

var rvContainer = document.getElementById('roadview'); // 로드뷰를 표시할 div
var rv = new kakao.maps.Roadview(rvContainer); // 로드뷰 객체 생성
var rc = new kakao.maps.RoadviewClient(); // 좌표를 통한 로드뷰의 panoid를 추출하기 위한 로드뷰 help객체 생성 
var rvPosition = new kakao.maps.LatLng(37.572743, 126.977228);

rc.getNearestPanoId(rvPosition, 50, function(panoid) {
    rv.setPanoId(panoid, rvPosition);//좌표에 근접한 panoId를 통해 로드뷰를 실행합니다.
});

// 로드뷰 초기화 이벤트
kakao.maps.event.addListener(rv, 'init', function() {
    
    //로드뷰의 viewpoint값을 적절하게 이동시킵니다.
    rv.setViewpoint( new kakao.maps.Viewpoint( 300, -7, 3 ) );

    //커스텀 오버레이를 로드뷰 위에 올립니다.
    new kakao.maps.CustomOverlay({
        map: rv,
        position:  new kakao.maps.Viewpoint(299.7, -7.6),
        content: img
    });
});
</script>
</body>
</html>