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 기본값:
false true 인 경우 기본 지도 라벨이 렌더링되지 않습니다.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 |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
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 optional Map3DElement.bounds 를 참조하세요. |
center optional |
유형:
LatLngAltitude|LatLngAltitudeLiteral optional Map3DElement.center 를 참조하세요. |
defaultLabelsDisabled optional |
유형:
boolean optional |
heading optional |
유형:
number optional Map3DElement.heading 를 참조하세요. |
maxAltitude optional |
유형:
number optional Map3DElement.maxAltitude 를 참조하세요. |
maxHeading optional |
유형:
number optional Map3DElement.maxHeading 를 참조하세요. |
maxTilt optional |
유형:
number optional Map3DElement.maxTilt 를 참조하세요. |
minAltitude optional |
유형:
number optional Map3DElement.minAltitude 를 참조하세요. |
minHeading optional |
유형:
number optional Map3DElement.minHeading 를 참조하세요. |
minTilt optional |
유형:
number optional Map3DElement.minTilt 를 참조하세요. |
range optional |
유형:
number optional Map3DElement.range 를 참조하세요. |
roll optional |
유형:
number optional Map3DElement.roll 를 참조하세요. |
tilt optional |
유형:
number optional Map3DElement.tilt 를 참조하세요. |
SteadyChangeEvent 클래스
google.maps.maps3d.SteadyChangeEvent
클래스
이 이벤트는 Map3DElement
의 안정적인 상태를 모니터링하여 생성됩니다. 이 이벤트는 DOM 트리를 통해 표시됩니다.
이 클래스는
Event
const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d")
를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
속성 | |
---|---|
isSteady |
유형:
boolean Map3DElement가 안정적인지 (즉, 현재 장면의 모든 렌더링이 완료되었는지) 여부를 나타냅니다. |
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의 라이브러리를 참고하세요.
다중선3D요소 클래스
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 기본값:
false true 인 경우 다중선의 가장자리는 최단 거리로 해석되며 지구의 곡률을 따릅니다. 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 optional 0.0 ~1.0 사이의 획 불투명도입니다.HTML 속성:
|
strokeWidth |
유형:
number optional 픽셀 단위의 스트로크 너비입니다.
HTML 속성:
|
zIndex |
유형:
number optional 다른 폴리라인/폴리곤과 비교한 zIndex입니다.
HTML 속성:
|
메서드 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
void 이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 제거합니다. removeEventListener를 참조하세요. |
다중선3D요소 옵션 인터페이스
google.maps.maps3d.Polyline3DElementOptions
인터페이스
Polyline3DElement에 설정할 수 있는 속성을 정의하는 데 사용되는 Polyline3DElementOptions 객체입니다.
다각형 3D 요소 클래스
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 optional 0.0과 1.0 사이의 채우기 불투명도입니다.
HTML 속성:
|
geodesic |
유형:
boolean optional 기본값:
false true 인 경우 다각형의 가장자리는 최단 거리로 해석되며 지구의 곡률을 따릅니다. 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 |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
void 이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 제거합니다. removeEventListener를 참조하세요. |
다각형3D요소 옵션 인터페이스
google.maps.maps3d.Polygon3DElementOptions
인터페이스
Polygon3DElement에 설정할 수 있는 속성을 정의하는 데 사용되는 Polygon3DElementOptions 객체입니다.
속성 | |
---|---|
altitudeMode optional |
유형:
AltitudeMode optional Polygon3DElement.altitudeMode 를 참조하세요. |
drawsOccludedSegments optional |
유형:
boolean optional 기본값:
false |
extruded optional |
유형:
boolean optional 기본값:
false Polygon3DElement.extruded 를 참조하세요. |
fillColor optional |
유형:
string optional Polygon3DElement.fillColor 를 참조하세요. |
fillOpacity optional |
유형:
number optional Polygon3DElement.fillOpacity 를 참조하세요. |
geodesic optional |
유형:
boolean optional 기본값:
false Polygon3DElement.geodesic 를 참조하세요. |
innerCoordinates optional |
유형:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral>|Iterable<LatLngLiteral>> optional |
outerCoordinates optional |
유형:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional |
strokeColor optional |
유형:
string optional Polygon3DElement.strokeColor 를 참조하세요. |
strokeOpacity optional |
유형:
number optional Polygon3DElement.strokeOpacity 를 참조하세요. |
strokeWidth optional |
유형:
number optional Polygon3DElement.strokeWidth 를 참조하세요. |
zIndex optional |
유형:
number optional Polygon3DElement.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 |
가장 높은 지면+건물+해수면을 기준으로 객체를 표현할 수 있습니다. 물 위에 있을 때는 수면이 됩니다. 지형 위에 있는 경우 건물 표면 (있는 경우) 또는 지면 (건물이 없는 경우)이 됩니다. |