[Kakao API] 로드뷰(roadview) API 사용하기

카카오 로드뷰 API 를 사용하는 방법에 대해 알아보자.

http://apis.map.kakao.com/web/sample/basicRoadview/

해당 사이트에 들어가면 Kakao Developer 에서 제공하는 api 사용예제 같은게 나와있다.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>로드뷰 생성하기</title>

</head>
<body>
<!-- 로드뷰를 표시할 div 입니다 -->
<div id="roadview" style="width:100%;height:300px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
    <script>
            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>
</body>
</html>

" API key 발급방법 "

API Key 만 있으면 아주 가볍게 사용 가능한 API이다.

아래는 실제로 프로젝트에 조금 손봐서 적용한 사례이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>kakao RoadView</title>
    <style >
    html, body, #roadview {margin: 0; padding: 0; width: 100%; height: 100%}
    </style>
    <script  src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY"></script>
    <script>
    var roadviewContainer, roadview, roadviewClient;
    function init() {
        roadviewContainer = document.getElementById('roadview');
        roadview = new kakao.maps.Roadview(roadviewContainer);
        roadviewClient = new kakao.maps.RoadviewClient();
    }

    function setCoordinate(lat, lng) {
        var position = new kakao.maps.LatLng(lat, lng);
        roadviewClient.getNearestPanoId(position, 50, function(panoId) {
            roadview.setPanoId(panoId, position);
        });
    }
    </script>
</head>
<body onload="init();">
    <div id="roadview"></div>
</body>
</html>