Map3DElement 클래스
google.maps.maps3d.Map3DElement 클래스
Map3DElement는 3D 지도 뷰의 HTML 인터페이스입니다.
맞춤 요소:
<gmp-map-3d center="lat,lng,altitude" default-labels-disabled heading="number" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" range="number" roll="number" tilt="number"></gmp-map-3d>
이 클래스는 HTMLElement를 확장합니다.
이 클래스는 Map3DElementOptions를 구현합니다.
const {Map3DElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
생성자 | |
|---|---|
Map3DElement |
Map3DElement([options])매개변수:
|
속성 | |
|---|---|
bounds |
유형:
LatLngBounds|LatLngBoundsLiteral optional설정하면 카메라 위치가 지정된 lat/lng 경계 내에 제한됩니다. 경계 밖의 객체는 계속 렌더링됩니다. 경계는 경도와 위도를 모두 제한하거나 위도 또는 경도 중 하나만 제한할 수 있습니다. 위도 전용 경계의 경우 서쪽 경도 -180와 동쪽 경도 180를 각각 사용합니다. 경도 전용 경계의 경우 각각 북위와 남위인 90 및 -90를 사용합니다. |
center |
유형:
LatLngAltitude|LatLngAltitudeLiteral optional지도의 중앙으로, LatLngAltitude로 지정되며 고도는 지상에서부터의 미터 값입니다.
range 필드는 지도 중심에서 카메라까지의 거리에 영향을 미치므로 반드시 카메라가 있는 위치는 아닙니다. 설정하지 않으면 기본값은 {lat: 0, lng: 0, altitude: 63170000}입니다. 63170000미터는 허용되는 최대 고도입니다 (지구 반지름에 10을 곱한 값).HTML 속성:
|
defaultLabelsDisabled |
유형:
boolean optional기본값:
falsetrue인 경우 기본 지도 라벨이 렌더링되지 않습니다.HTML 속성:
|
heading |
유형:
number optional지도의 나침반 방위(단위: 도, 정북이 0도)입니다. 기울기가 없으면 롤이 방향으로 해석됩니다.
HTML 속성:
|
maxAltitude |
유형:
number optional지도에 표시되는 지상 최대 고도입니다. 유효한 값은
0~63170000미터 (지구 반지름에 10을 곱한 값)입니다.HTML 속성:
|
maxHeading |
유형:
number optional지도의 최대 방향 각도 (회전)입니다. 유효한 값은
0~360도입니다. minHeading와 maxHeading는 방향 동작이 허용되는 360도 이하의 간격을 나타냅니다. minHeading = 180 및 maxHeading = 90는 [0, 90]의 제목과 [180, 360]의 제목을 허용합니다. minHeading = 90 및 maxHeading = 180는 [90, 180]에서 제목을 허용합니다.HTML 속성:
|
maxTilt |
유형:
number optional지도의 최대 입사각입니다. 유효한 값은
0~90도입니다.HTML 속성:
|
minAltitude |
유형:
number optional지도에 표시되는 지상 고도에 대한 최솟값입니다. 유효한 값은
0~63170000미터 (지구 반지름에 10을 곱한 값)입니다.HTML 속성:
|
minHeading |
유형:
number optional지도의 방향 (회전) 최소 각도입니다. 유효한 값은
0~360도입니다. minHeading와 maxHeading는 방향 동작이 허용되는 360도 이하의 간격을 나타냅니다. minHeading = 180 및 maxHeading = 90는 [0, 90]의 제목과 [180, 360]의 제목을 허용합니다. minHeading = 90 및 maxHeading = 180는 [90, 180]에서 제목을 허용합니다.HTML 속성:
|
minTilt |
유형:
number optional지도의 최소 입사각입니다. 유효한 값은
0~90도입니다.HTML 속성:
|
range |
유형:
number optional카메라에서 지도 중앙까지의 거리(미터)입니다.
HTML 속성:
|
roll |
유형:
number optional뷰 벡터를 중심으로 카메라가 롤링된 각도(도)입니다. 모호성을 해결하기 위해 기울기가 없으면 모든 롤이 방향으로 해석됩니다.
HTML 속성:
|
tilt |
유형:
number optional카메라 뷰 벡터의 기울기(도)입니다. 지구를 바로 아래에서 바라보는 뷰 벡터의 기울기는 0도입니다. 지구를 향하지 않는 뷰 벡터의 기울기는
180도입니다.HTML 속성:
|
메서드 | |
|---|---|
|
addEventListener(type, listener[, options])매개변수:
반환 값:
void지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
|
removeEventListener(type, listener[, options])매개변수:
반환 값:
void이전에 addEventListener에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요. |
이벤트 | |
|---|---|
gmp-centerchange |
function(centerChangeEvent)인수:
이 이벤트는 Map3DElement의 center 속성이 변경될 때 실행됩니다. |
gmp-click |
function(clickEvent)인수:
이 이벤트는 Map3DElement 요소가 클릭될 때 실행됩니다. |
gmp-headingchange |
function(headingChangeEvent)인수:
이 이벤트는 Map3DElement의 방향 속성이 변경될 때 실행됩니다. |
gmp-rangechange |
function(rangeChangeEvent)인수:
이 이벤트는 Map3DElement의 범위 속성이 변경될 때 실행됩니다. |
gmp-rollchange |
function(rollChangeEvent)인수:
이 이벤트는 Map3DElement의 롤 속성이 변경될 때 실행됩니다. |
gmp-steadychange |
function(steadyChangeEvent)인수:
이 이벤트는 Map3DElement의 안정 상태가 변경될 때 실행됩니다. |
gmp-tiltchange |
function(tiltChangeEvent)인수:
이 이벤트는 Map3DElement의 기울기 속성이 변경될 때 실행됩니다. |
Map3DElementOptions 인터페이스
google.maps.maps3d.Map3DElementOptions 인터페이스
Map3DElement에 설정할 수 있는 속성을 정의하는 데 사용되는 Map3DElementOptions 객체입니다.
속성 | |
|---|---|
bounds optional |
유형:
LatLngBounds|LatLngBoundsLiteral optionalMap3DElement.bounds를 참조하세요. |
center optional |
유형:
LatLngAltitude|LatLngAltitudeLiteral optionalMap3DElement.center를 참조하세요. |
defaultLabelsDisabled optional |
유형:
boolean optional |
heading optional |
유형:
number optionalMap3DElement.heading를 참조하세요. |
maxAltitude optional |
유형:
number optionalMap3DElement.maxAltitude를 참조하세요. |
maxHeading optional |
유형:
number optionalMap3DElement.maxHeading를 참조하세요. |
maxTilt optional |
유형:
number optionalMap3DElement.maxTilt를 참조하세요. |
minAltitude optional |
유형:
number optionalMap3DElement.minAltitude를 참조하세요. |
minHeading optional |
유형:
number optionalMap3DElement.minHeading를 참조하세요. |
minTilt optional |
유형:
number optionalMap3DElement.minTilt를 참조하세요. |
range optional |
유형:
number optionalMap3DElement.range를 참조하세요. |
roll optional |
유형:
number optionalMap3DElement.roll를 참조하세요. |
tilt optional |
유형:
number optionalMap3DElement.tilt를 참조하세요. |
SteadyChangeEvent 클래스
google.maps.maps3d.SteadyChangeEvent 클래스
이 이벤트는 Map3DElement의 안정 상태를 모니터링하여 생성됩니다. 이 이벤트는 DOM 트리를 통해 위로 전파됩니다.
이 클래스는 Event를 확장합니다.
const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
속성 | |
|---|---|
isSteady |
유형:
booleanMap3DElement가 안정적인지 (즉, 현재 장면의 모든 렌더링이 완료되었는지) 여부를 나타냅니다. |
ClickEvent 클래스
google.maps.maps3d.ClickEvent 클래스
이 이벤트는 Map3DElement를 클릭하면 생성됩니다.
이 클래스는 Event를 확장합니다.
const {ClickEvent} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
속성 | |
|---|---|
position |
유형:
LatLngAltitude optional이벤트가 발생했을 때 커서 아래에 있던 위도/경도/고도입니다. 더 거친 수준에서는 데이터 정확도가 떨어집니다. 또한 더 높은 카메라 위치에서 수면을 클릭하면 해저 고도가 고도 값으로 반환될 수 있습니다. 이 이벤트는 DOM 트리를 통해 위로 전파됩니다. |
CenterChangeEvent 클래스
google.maps.maps3d.CenterChangeEvent 클래스
이 이벤트는 Map3DElement의 모니터링 센터 변경사항에서 생성됩니다. 이 이벤트는 DOM 트리를 통해 위로 전파됩니다.
이 클래스는 Event를 확장합니다.
const {CenterChangeEvent} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
HeadingChangeEvent 클래스
google.maps.maps3d.HeadingChangeEvent 클래스
이 이벤트는 Map3DElement에서 제목 변경을 모니터링하여 생성됩니다. 이 이벤트는 DOM 트리를 통해 위로 전파됩니다.
이 클래스는 Event를 확장합니다.
const {HeadingChangeEvent} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
RangeChangeEvent 클래스
google.maps.maps3d.RangeChangeEvent 클래스
이 이벤트는 Map3DElement의 모니터링 범위 변경에서 생성됩니다. 이 이벤트는 DOM 트리를 통해 위로 전파됩니다.
이 클래스는 Event를 확장합니다.
const {RangeChangeEvent} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
RollChangeEvent 클래스
google.maps.maps3d.RollChangeEvent 클래스
이 이벤트는 Map3DElement의 롤 변경 모니터링에서 생성됩니다. 이 이벤트는 DOM 트리를 통해 위로 전파됩니다.
이 클래스는 Event를 확장합니다.
const {RollChangeEvent} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
TiltChangeEvent 클래스
google.maps.maps3d.TiltChangeEvent 클래스
이 이벤트는 Map3DElement의 기울기 변경을 모니터링하여 생성됩니다. 이 이벤트는 DOM 트리를 통해 위로 전파됩니다.
이 클래스는 Event를 확장합니다.
const {TiltChangeEvent} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
Polyline3DElement 클래스
google.maps.maps3d.Polyline3DElement 클래스
3D 다중선은 3D 지도에서 연결된 선분의 선형 오버레이입니다.
맞춤 요소:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-opacity="number" outer-width="number" stroke-color="string" stroke-opacity="number" stroke-width="number" z-index="number"></gmp-polyline-3d>
이 클래스는 HTMLElement를 확장합니다.
이 클래스는 Polyline3DElementOptions를 구현합니다.
const {Polyline3DElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
생성자 | |
|---|---|
Polyline3DElement |
Polyline3DElement([options])매개변수:
|
속성 | |
|---|---|
altitudeMode |
유형:
AltitudeMode optional좌표의 고도 구성요소가 해석되는 방식을 지정합니다.
HTML 속성:
|
coordinates |
유형:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional순서대로 된 폴리라인의 좌표입니다. 고도는 특정 모드에서 무시되므로 선택사항입니다. |
drawsOccludedSegments |
유형:
boolean optional기본값:
false가려질 수 있는 다중선의 일부가 그려질지 여부를 지정합니다. 다중선은 지도 도형 (예: 건물)에 의해 가려질 수 있습니다.
HTML 속성:
|
extruded |
유형:
boolean optional기본값:
false다중선과 지상을 연결할지 지정합니다. 다중선을 돌출하려면
altitudeMode가 RELATIVE_TO_GROUND 또는 ABSOLUTE여야 합니다.HTML 속성:
|
geodesic |
유형:
boolean optional기본값:
falsetrue인 경우 다중선의 가장자리가 측지선으로 해석되어 지구의 곡선을 따릅니다. false인 경우 다중선의 가장자리가 화면 공간에서 직선으로 렌더링됩니다.HTML 속성:
|
outerColor |
유형:
string optional외부 색상입니다. 모든 CSS3 색상이 지원됩니다.
HTML 속성:
|
outerOpacity |
유형:
number optional0.0~1.0 사이의 외부 불투명도입니다.HTML 속성:
|
outerWidth |
유형:
number optional외부 너비는
0.0~1.0입니다. strokeWidth의 비율입니다.HTML 속성:
|
strokeColor |
유형:
string optional획 색상입니다. 모든 CSS3 색상이 지원됩니다.
HTML 속성:
|
strokeOpacity |
유형:
number optional획 불투명도(
0.0~1.0)HTML 속성:
|
strokeWidth |
유형:
number optional픽셀 단위의 스트로크 너비입니다.
HTML 속성:
|
zIndex |
유형:
number optional다른 폴리라인/폴리곤과 비교한 zIndex입니다.
HTML 속성:
|
메서드 | |
|---|---|
|
addEventListener(type, listener[, options])매개변수:
반환 값:
void지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
|
removeEventListener(type, listener[, options])매개변수:
반환 값:
void이전에 addEventListener에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요. |
Polyline3DElementOptions 인터페이스
google.maps.maps3d.Polyline3DElementOptions 인터페이스
Polyline3DElement에 설정할 수 있는 속성을 정의하는 데 사용되는 Polyline3DElementOptions 객체입니다.
Polygon3DElement 클래스
google.maps.maps3d.Polygon3DElement 클래스
3D 다각형 (예: 3D 다중선)은 순서가 지정된 일련의 연결된 좌표를 정의합니다. 또한 다각형은 닫힌 루프를 형성하고 채워진 영역을 정의합니다.
맞춤 요소:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" fill-opacity="number" geodesic stroke-color="string" stroke-opacity="number" stroke-width="number" z-index="number"></gmp-polygon-3d>
이 클래스는 HTMLElement를 확장합니다.
이 클래스는 Polygon3DElementOptions를 구현합니다.
const {Polygon3DElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
생성자 | |
|---|---|
Polygon3DElement |
Polygon3DElement([options])매개변수:
|
속성 | |
|---|---|
altitudeMode |
유형:
AltitudeMode optional좌표의 고도 구성요소가 해석되는 방식을 지정합니다.
HTML 속성:
|
drawsOccludedSegments |
유형:
boolean optional기본값:
false가려질 수 있는 다각형 부분을 그릴지 여부를 지정합니다. 다각형은 지도 도형 (예: 건물)에 의해 가려질 수 있습니다.
HTML 속성:
|
extruded |
유형:
boolean optional기본값:
false다각형을 지면에 연결할지 지정합니다. 다각형을 돌출하려면
altitudeMode가 RELATIVE_TO_GROUND 또는 ABSOLUTE여야 합니다.HTML 속성:
|
fillColor |
유형:
string optional채우기 색상입니다. 모든 CSS3 색상이 지원됩니다.
HTML 속성:
|
fillOpacity |
유형:
number optional0.0과 1.0 사이의 채우기 불투명도입니다.
HTML 속성:
|
geodesic |
유형:
boolean optional기본값:
falsetrue인 경우 다각형의 가장자리가 측지 라인으로 해석되어 지구의 곡선을 따릅니다. false인 경우 다각형의 가장자리가 화면 공간에서 직선으로 렌더링됩니다.HTML 속성:
|
innerCoordinates |
유형:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional닫힌 루프를 지정하는, 순서대로 된 좌표입니다. 다중선과 달리 다각형은 하나 이상의 경로로 구성될 수 있으며, 이 경로는 다각형 내부에 여러 개의 컷아웃을 만듭니다. |
outerCoordinates |
유형:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional닫힌 루프를 지정하는, 순서대로 된 좌표입니다. 고도는 특정 모드에서 무시되므로 선택사항입니다. |
strokeColor |
유형:
string optional획 색상입니다. 모든 CSS3 색상이 지원됩니다.
HTML 속성:
|
strokeOpacity |
유형:
number optional획 불투명도(
0.0~1.0)HTML 속성:
|
strokeWidth |
유형:
number optional픽셀 단위의 스트로크 너비입니다.
HTML 속성:
|
zIndex |
유형:
number optional다른 폴리라인/폴리곤과 비교한 zIndex입니다.
HTML 속성:
|
메서드 | |
|---|---|
|
addEventListener(type, listener[, options])매개변수:
반환 값:
void지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
|
removeEventListener(type, listener[, options])매개변수:
반환 값:
void이전에 addEventListener에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요. |
Polygon3DElementOptions 인터페이스
google.maps.maps3d.Polygon3DElementOptions 인터페이스
Polygon3DElement에 설정할 수 있는 속성을 정의하는 데 사용되는 Polygon3DElementOptions 객체입니다.
속성 | |
|---|---|
altitudeMode optional |
유형:
AltitudeMode optionalPolygon3DElement.altitudeMode를 참조하세요. |
drawsOccludedSegments optional |
유형:
boolean optional기본값:
false |
extruded optional |
유형:
boolean optional기본값:
falsePolygon3DElement.extruded를 참조하세요. |
fillColor optional |
유형:
string optionalPolygon3DElement.fillColor를 참조하세요. |
fillOpacity optional |
유형:
number optionalPolygon3DElement.fillOpacity를 참조하세요. |
geodesic optional |
유형:
boolean optional기본값:
falsePolygon3DElement.geodesic를 참조하세요. |
innerCoordinates optional |
유형:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral>|Iterable<LatLngLiteral>> optional |
outerCoordinates optional |
유형:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional |
strokeColor optional |
유형:
string optionalPolygon3DElement.strokeColor를 참조하세요. |
strokeOpacity optional |
유형:
number optionalPolygon3DElement.strokeOpacity를 참조하세요. |
strokeWidth optional |
유형:
number optionalPolygon3DElement.strokeWidth를 참조하세요. |
zIndex optional |
유형:
number optionalPolygon3DElement.zIndex를 참조하세요. |
AltitudeMode 상수
google.maps.maps3d.AltitudeMode 상수
좌표의 고도 구성요소가 해석되는 방식을 지정합니다.
const {AltitudeMode} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
상수 | |
|---|---|
ABSOLUTE |
평균 해수면을 기준으로 객체를 표현할 수 있습니다. 즉, 객체 아래에서 지형 세부정보 수준이 변경되더라도 절대 위치는 동일하게 유지됩니다. |
CLAMP_TO_GROUND |
지상에 배치된 물체를 표현할 수 있습니다. 제공된 고도와 관계없이 지형을 따라 지상 수준으로 유지됩니다. 객체가 주요 수역 위에 위치하는 경우 해수면으로 배치됩니다. |
RELATIVE_TO_GROUND |
지표면을 기준으로 객체를 표현할 수 있습니다. 지형 세부정보 수준이 변경되면 객체의 위치는 지상에 대해 일정하게 유지됩니다. 물 위에 있으면 해발 고도가 해수면 위의 미터 값으로 해석됩니다. |
RELATIVE_TO_MESH |
지상+건물+수면 중 가장 높은 지점을 기준으로 객체를 표현할 수 있습니다. 물 위에 있으면 수면이고 지형 위에 있으면 건물 표면 (건물이 있는 경우) 또는 지상 표면 (건물이 없는 경우)입니다. |