파노라마 생성 및 기본 동작

파노라마 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 지정한 DOM 요소에 파노라마 이미지를 표시할 수 있는 뷰어를 삽입하여 거리뷰, 항공뷰 등의 서비스(이하 파노라마)를 제공할 수 있도록 합니다.

파노라마에 대한 다양한 예제는 파노라마 예제를 참고합니다.

서브 모듈 로드하기

파노라마를 사용하려면 파노라마 서브 모듈 JavaScript 파일을 로드해야 합니다. 다음과 같이 파일을 로드합니다.
파노라마 서브 모듈을 사용하려면 NAVER 지도 API v3이 로드되어 있어야 합니다. 자세한 사항은 서브 모듈 시스템을 참고합니다.

NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다.

네이버 클라우드 플랫폼

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=panorama"></script>

공공기관용

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&submodules=panorama"></script>

금융기관용

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?finClientId=YOUR_CLIENT_ID&submodules=drawing"></script>

파노라마 DOM 요소 지정하기

웹 페이지에 지도를 삽입할 DOM 요소를 지정합니다. 일반적으로 <div></div> 요소를 사용합니다.

<div id="pano" style="width:100%;height:400px;"></div>

지도를 초기화할 때 PanoramaOptions의 size를 지정하지 않으면 초기화 시점의 지도 DOM 컨테이너의 크기로 지도 크기를 설정합니다. 이후 setSize 메서드를 이용해 지도 크기를 변경하기 전까지 지도 크기는 고정됩니다.

파노라마 옵션 설정하기

파노라마 옵션은 파노라마를 생성할 때 파노라마의 속성을 초기화하는 데 사용되며, 객체 리터럴로 만듭니다. 파노라마 옵션에 대한 자세한 설명은 PanoramaOptions 명세를 참고합니다.

var panoramaOptions = {
    position: new naver.maps.LatLng(37.3599605, 127.1058814),
    size: new naver.maps.Size(800, 600),
    pov: {
        pan: -135,
        tilt: 29,
        fov: 100
    }
};

파노라마 생성하기

Panorama 클래스는 파노라마를 표현하는 클래스입니다. new 연산자를 이용하여 새 인스턴스를 생성합니다.
파노라마를 표시하려면 파노라마 뷰어가 삽입될 DOM 요소 또는 DOM 요소의 id를 명시해야 합니다.

var pano = new naver.maps.Panorama(document.getElementById("pano"), {
    position: new naver.maps.LatLng(37.3599605, 127.1058814)
});

또는

var pano = new naver.maps.Panorama("pano", {
    position: new naver.maps.LatLng(37.3599605, 127.1058814)
});

새 인스턴스를 만들 때 두 가지 인수를 전달합니다.

파노라마를 표현할 컨테이너 요소. 반드시 전달해야 합니다. 앞서 파노라마를 표현하기 위해 지정한 DOM 요소의 id 문자열을 직접 전달하거나, document.getElementById 메서드를 이용해 해당 DOM 요소의 참조를 전달할 수 있습니다.
파노라마의 속성을 초기화하는 데 이용하는 파노라마 옵션. 반드시 전달해야 합니다. panoId와 position 속성 중 하나는 반드시 설정해야 합니다.

파노라마 위치와 시야(POV)

파노라마 위치

PanoramaLocation 객체는 파노라마의 위치 정보를 나타냅니다.

var pano = new naver.maps.Panorama("pano", {
    position: new naver.maps.LatLng(37.3599605, 127.1058814)
});

naver.maps.Event.addListener(pano, "pano_changed", function() {
    console.log("PanoramaLocation", pano.getLocation()); // panoId, title, address, coord, photodate
});

파노라마 시야(Pov)

PanoramaPov 객체는 파노라마의 시야(POV, Point of View) 정보를 나타냅니다.

var pano = new naver.maps.Panorama("pano", {
    position: new naver.maps.LatLng(37.3599605, 127.1058814)
});

naver.maps.Event.addListener(pano, "pov_changed", function() {
    console.log("PanoramaPov", pano.getPov()); // pan, tilt, fov
});

파노라마 이벤트

Panorama 객체는 상태 변경에 대한 알림 및 이벤트를 제공합니다.

상태 변경 알림

pano_changed: 파노라마 id가 변경되면 발생하는 이벤트입니다. 이 이벤트는 시야가 변경되었을 때는 발생하지 않습니다. 파노라마 id 또는 파노라마 위치가 변경되어 새로운 파노라마를 조회한 다음 파노라마 id가 변경되었을 때 발생합니다.
pov_changed: 파노라마 시야가 변경되면 발생하는 이벤트입니다. 이 이벤트는 파노라마 id와 파노라마 위치가 변경되었을 때는 발생하지 않습니다.

이벤트

init: 파노라마 초기화를 끝내면 발생하는 이벤트입니다. 따라서 파노라마 위에 마커 등의 오버레이를 올리려면 이 이벤트가 발생한 다음에 수행해야 정상적으로 동작합니다.
pano_status: 파노라마 조회를 끝내면 발생하는 이벤트입니다. 파노라마 조회를 정상적으로 마치면 OK 상태이며, 파노라마 조회를 비정상적으로 마치거나 파노라마가 없으면 ERROR 상태입니다.

var pano = new naver.maps.Panorama("pano", {
    position: new naver.maps.LatLng(37.3599605, 127.1058814),
    pov: {
        pan: -135,
        tilt: 29,
        fov: 100
    },
    visible: false
});

naver.maps.Event.addListener(pano, "init", function() {
    pano.setVisible(true);
});

naver.maps.Event.addListener(pano, "pano_status", function(status) {
    $("#pano_status_cell").text(status + ", " + pano.getPanoId());
});

naver.maps.Event.addListener(pano, "pano_changed", function() {
    $("#id_cell").text(pano.getPanoId());
    $("#position_cell").text(pano.getPosition());
    $("#roadname_cell").text(pano.getLocation().title);
    $("#address_cell").text(pano.getLocation().address);
    $("#photodate_cell").text(pano.getLocation().photodate);
});

naver.maps.Event.addListener(pano, "pov_changed", function() {
    $("#pan_cell").text(pano.getPov().pan);
    $("#tilt_cell").text(pano.getPov().tilt);
    $("#fov_cell").text(pano.getPov().fov);

    $("#zoom_cell").text(pano.getZoom());
    $("#min_zoom_cell").text(pano.getMinZoom());
    $("#max_zoom_cell").text(pano.getMaxZoom());
});

위 예제는 jQuery 구문을 포함하고 있습니다.

Examples: 파노라마 이벤트 처리하기