logo
Tutorials Examples naver map js api v3 네이버 지도 API Panorama

Class: naver.maps.Panorama

naver.maps. Panorama

Panorama 클래스는 애플리케이션에서 파노라마 인스턴스를 정의합니다. 개발자는 이 객체를 생성해서 지정한 DOM 요소에 파노라마를 삽입할 수 있습니다.

이 클래스는 panorama 서브 모듈을 로드해야 합니다.

new naver.maps.Panorama(panoramaDiv, panoramaOptions)

Parameters
Name Type Description
panoramaDiv string | HTMLElement

파노라마를 삽입할 HTML 요소

panoramaOptions PanoramaOptions

파노라마 옵션

Tutorials
Requires
Example

Panorama 기본 사용법

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

naver.maps.Event.addListener(pano, "init", function() {
    console.log("init");
});

naver.maps.Event.addListener(pano, "pano_status", function(status) {
    console.log("pano_status", status, pano.getPanoId());
});

naver.maps.Event.addListener(pano, "pano_changed", function() {
    console.log("pano_changed", pano.getLocation());
});

naver.maps.Event.addListener(pano, "pov_changed", function() {
    console.log("pov_changed", pano.getPov());
});

Extends

Requires

Methods

getElement()

파노라마의 HTML 요소를 반환합니다.

Returns
Type Description
HTMLElement

현재 파노라마의 HTML 요소

getLocation()

파노라마의 위치 정보를 반환합니다.

Returns
Type Description
PanoramaLocation

위치 정보

getMaxScale()

파노라마의 최대 배율을 반환합니다.

Returns
Type Description
number

파노라마 최대 배율

getMaxZoom()

파노라마의 최대 줌 레벨을 반환합니다.

Returns
Type Description
number

파노라마 최대 줌 레벨

getMinScale()

파노라마의 최소 배율을 반환합니다.

Returns
Type Description
number

파노라마 최소 배율

getMinZoom()

파노라마의 최소 줌 레벨을 반환합니다.

Returns
Type Description
number

파노라마 최소 줌 레벨

getOptions(key)

파노라마의 모든 옵션 또는 특정 옵션의 값을 반환합니다.

Parameters
Name Type Argument Description
key string <optional>

가져올 옵션의 이름

Returns
Type Description
any

모든 옵션 또는 특정 key에 해당되는 옵션의 값

getPanoId()

파노라마의 id를 반환합니다.

Returns
Type Description
string

파노라마 id

getPosition()

파노라마의 위치를 반환합니다.

Returns
Type Description
naver.maps.LatLng

파노라마 위치

getPov()

파노라마의 시야를 반환합니다.

Returns
Type Description
PanoramaPov

파노라마 시야

getProjection()

파노라마의 투영을 반환합니다.

Returns
Type Description
PanoramaProjection

파노라마 투영 객체

getScale()

파노라마의 배율을 반환합니다.

Returns
Type Description
number

파노라마 배율

getSize()

파노라마의 화면 크기를 반환합니다.

Returns
Type Description
naver.maps.Size

파노라마 화면 크기

getVisible()

파노라마의 노출 여부를 반환합니다.

Returns
Type Description
boolean

파노라마 노출 여부

getZoom()

파노라마의 줌 레벨을 반환합니다.

Returns
Type Description
number

파노라마 줌 레벨

setOptions(newOptions|key, value)

파노라마의 옵션을 변경하거나 새로 설정합니다.

Parameters
Name Type Argument Description
newOptions|key object | string

파노라마의 옵션 객체 또는 특정 옵션의 이름

value any <optional>

옵션의 값

setPanoId(panoId)

파노라마의 id를 설정합니다.

Parameters
Name Type Description
panoId string

파노라마 id

Fires

setPanoIdWithPov(panoId, pov)

파노라마의 id와 시야를 함께 설정합니다.

Parameters
Name Type Description
panoId string

파노라마 id

pov PanoramaPov

파노라마 시야

Fires

setPosition(position)

파노라마의 위치를 설정합니다. 해당 위치에서 가장 가까운 파노라마(검색 반경 300미터)를 자동으로 설정합니다.

Parameters
Name Type Description
position naver.maps.LatLng | LatLngLiteral

파노라마 위치

Fires

setPov(pov)

파노라마의 시야를 설정합니다.

Parameters
Name Type Description
pov PanoramaPov

파노라마 시야

Fires

setScale(scale)

파노라마의 배율을 설정합니다.

Parameters
Name Type Description
scale number

파노라마 배율

setSize(size)

파노라마의 화면 크기를 펙셀 단위로 설정합니다.

Parameters
Name Type Description
size naver.maps.Size | SizeLiteral

파노라마 화면 크기

setVisible(visible)

파노라마의 노출 여부를 설정합니다.

Parameters
Name Type Description
visible boolean

파노라마 노출 여부

setZoom(zoom)

파노라마의 줌 레벨을 설정합니다.

Parameters
Name Type Description
zoom number

파노라마 줌 레벨

Fires

zoomIn()

파노라마를 1 레벨 확대합니다.

Fires

zoomOut()

파노라마를 1 레벨 축소합니다.

Fires

Type Definitions


PanoramaLocation

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

Type:
Properties
Name Type Description
panoId string

파노라마의 id입니다.

title string

파노라마의 도로명입니다.

address string

파노라마의 주소입니다.

coord naver.maps.LatLng

파노라마 위치(촬영 위치)의 위/경도 좌표입니다.

photodate string

파노라마의 촬영일입니다.


PanoramaOptions

PanoramaOptions 객체는 파노라마를 정의하는 옵션을 나타냅니다. panoId 속성과 position 속성 중 하나는 반드시 설정해야 합니다. 두 속성을 모두 설정하면, 우선순위에 따라 panoId 속성을 적용합니다.

Type:
Properties
Name Type Default Description
size naver.maps.Size | SizeLiteral

파노라마의 크기입니다. 이 옵션을 설정하지 않으면 파노라마 초기화 시 파노라마 개체가 삽입된 요소의 크기로 설정합니다.

panoId string

파노라마의 id입니다.

position naver.maps.LatLng | LatLngLiteral

파노라마의 위/경도 좌표입니다.

pov PanoramaPov

파노라마의 시야 정보입니다.

visible boolean true

파노라마의 노출 여부입니다.

minScale number 0

파노라마의 최소 배율입니다.

maxScale number 10

파노라마의 최대 배율입니다.

minZoom number 0

파노라마의 최소 줌 레벨입니다.

maxZoom number 4

파노라마의 최대 줌 레벨입니다.

logoControl boolean true

NAVER 로고 컨트롤의 표시 여부입니다.

logoControlOptions LogoControlOptions

NAVER 로고 컨트롤의 옵션입니다. 자세한 설명은 LogoControlOptions 명세를 참고합니다.

zoomControl boolean false

줌 컨트롤의 표시 여부입니다.

zoomControlOptions ZoomControlOptions

줌 컨트롤의 옵션입니다. 자세한 설명은 ZoomControlOptions 명세를 참고합니다.

aroundControl boolean false

주변 컨트롤(거리뷰/항공뷰 전환)의 표시 여부입니다.

aroundControlOptions AroundControlOptions

주변 컨트롤(거리뷰/항공뷰 전환)의 옵션입니다. 자세한 설명은 AroundControlOptions 명세를 참고합니다.

Example
var panoramaOptions = {
    size: new naver.maps.Size(800, 600),
    // panoId: "GeuHvj1YMFW56xcrravtcg==",
    position: new naver.maps.LatLng(37.3599605, 127.1058814),
    pov: {
        pan: -135,
        tilt: 29,
        fov: 100
    },
    visible: true,
    aroundControl: true,
    minScale: 0,
    maxScale: 10,
    minZoom: 0,
    maxZoom: 4,
    logoControl: true,
    logoControlOptions: {
        position: naver.maps.Position.BOTTOM_RIGHT
    },
    zoomControl: true,
    zoomControlOptions: {
        position: naver.maps.Position.TOP_LEFT,
        style: naver.maps.ZoomControlStyle.SMALL
    },
    aroundControl: true,
    aroundControlOptions: {
        position: naver.maps.Position.TOP_RIGHT
    }
};

var panorama = new naver.maps.Panorama("pano",panoramaOptions);

PanoramaPov

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

Type:
Properties
Name Type Default Description
pan number 0

카메라의 이동(좌우) 위치입니다. 진북 기준이며, 값은 -180(좌)~180(우)입니다.

tilt number 0

카메라의 이동(상하) 위치입니다. 값은 -90(하)~90(상)입니다.

fov number 90

카메라의 각도입니다. 값은 100(최대)~20(최소)입니다.

Events

init

파노라마 초기화를 끝내면 발생하는 이벤트입니다.

pano_changed

파노라마 조회를 끝내면 발생하는 이벤트입니다.

pano_status

파노라마 id 또는 파노라마 위치가 변경되면 발생하는 이벤트입니다.

Parameters
Name Type Description
panoramaStatus string

파노라마 요청 결과(OK: 성공, ERROR: 실패)

pov_changed

파노라마 시야가 변경되면 발생하는 이벤트입니다.