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설정하면 지정된 위도/경도 경계 내에서 카메라 위치를 제한합니다. 경계 외부의 객체는 여전히 렌더링됩니다. 경계는 경도와 위도를 모두 제한하거나 위도 또는 경도만 제한할 수 있습니다. 위도 전용 경계에는 각각 -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의 중심 속성이 변경되면 시작됩니다. |
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 optionalMap3DElement.defaultLabelsDisabled 페이지를 참고하세요. |
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 상태를 모니터링하여 생성됩니다.
이 클래스는 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이벤트가 발생했을 때 커서 아래에 있던 위도/경도/고도입니다. 대략적인 수준에서는 정확성이 낮은 데이터가 반환됩니다. 또한 높은 카메라 위치에서 해수면을 클릭하면 고도 값으로 해저 고도가 반환될 수 있습니다. |
CenterChangeEvent 클래스
google.maps.maps3d.CenterChangeEvent 클래스
이 이벤트는 Map3DElement의 모니터링 센터 변경을 통해 생성됩니다.
이 클래스는 Event를 확장합니다.
const {CenterChangeEvent} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
HeadingChangeEvent 클래스
google.maps.maps3d.HeadingChangeEvent 클래스
이 이벤트는 Map3DElement의 제목 변경 모니터링을 통해 생성됩니다.
이 클래스는 Event를 확장합니다.
const {HeadingChangeEvent} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
RangeChangeEvent 클래스
google.maps.maps3d.RangeChangeEvent 클래스
이 이벤트는 Map3DElement의 범위 변경을 모니터링하여 생성됩니다.
이 클래스는 Event를 확장합니다.
const {RangeChangeEvent} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
RollChangeEvent 클래스
google.maps.maps3d.RollChangeEvent 클래스
이 이벤트는 Map3DElement의 롤 변경을 모니터링하여 생성됩니다.
이 클래스는 Event를 확장합니다.
const {RollChangeEvent} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
TiltChangeEvent 클래스
google.maps.maps3d.TiltChangeEvent 클래스
이 이벤트는 Map3DElement의 기울기 변화를 모니터링하여 생성됩니다.
이 클래스는 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 optional외부 불투명도로
0.0~1.0 사이입니다.HTML 속성:
|
outerWidth |
유형:
number optional외부 너비는
0.0~1.0 사이입니다. strokeWidth의 비율입니다.HTML 속성:
|
strokeColor |
유형:
string optional스트로크 색상입니다. 확장되었으며 이름이 지정된 색상을 제외하고 모든 CSS3 색상이 지원됩니다.
HTML 속성:
|
strokeOpacity |
유형:
number optional0.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 optional0.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 상수
google.maps.maps3d.AltitudeMode 상수
좌표의 고도 구성요소가 해석되는 방식을 지정합니다.
const {AltitudeMode} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
상수 | |
|---|---|
ABSOLUTE |
평균 해수면을 기준으로 객체를 표현할 수 있습니다. 즉, 객체 아래에서 지형의 세부정보가 변경되면 절대 위치가 동일하게 유지됩니다. |
CLAMP_TO_GROUND |
지면에 배치된 객체를 표현할 수 있습니다. 제공된 고도에 관계없이 지형을 따라 지면 수준을 유지합니다. 객체가 주요 물 위에 배치되면 해수면에 배치됩니다. |
RELATIVE_TO_GROUND |
지면을 기준으로 객체를 표현할 수 있습니다. 지형의 세부정보가 변경되면 객체의 위치가 지면을 기준으로 일정하게 유지됩니다. 물 위의 경우 고도는 해수면 위의 미터 단위 값으로 해석됩니다. |
RELATIVE_TO_MESH |
가장 높은 지상+건물+해수면을 기준으로 객체를 표현할 수 있습니다. 물 위에 있을 때는 해수면이 되고 지형 위에 있을 때는 건물 표면 (있는 경우) 또는 지면 (건물이 없는 경우)이 됩니다. |