반응형
카카오 로드뷰 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>
<!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>
반응형
댓글