Map3DElement 클래스
google.maps.maps3d.Map3DElement
class
extends HTMLElement
implements Map3DElementOptions
library "maps3d"
Map3DElement는 3D 지도 뷰의 HTML 인터페이스입니다. 3D 지도가 렌더링을 시작하려면 mode를 설정해야 합니다.
<gmp-map-3d autofits-camera-animation="value-name" camera-position="lat,lng,altitude" center="lat,lng,altitude" default-ui-hidden description="string" fov="number" gesture-handling="value-name" heading="number" internal-usage-attribution-ids="id1 id2" map-id="string" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" mode="value-name" range="number" roll="number" tilt="number"> </gmp-map-3d>
const {Map3DElement} = await google.maps.importLibrary("maps3d");
생성자 | |
|---|---|
Map3DElement |
Map3DElement([options])매개변수:
|
속성 | |
|---|---|
attr: autofits-camera-animation |
기본값:
none자동 카메라 맞춤에 사용할 애니메이션입니다.
HTML 속성: autofits-camera-animation="value-name" |
bounds |
설정하면 지정된 위도/경도 경계 내로 카메라 위치를 제한합니다. 경계 외부의 객체는 계속 렌더링됩니다. 경계는 경도와 위도를 모두 제한하거나 위도 또는 경도만 제한할 수 있습니다. 위도 전용 경계의 경우 서쪽 및 동쪽 경도에 각각 -180 및 180를 사용합니다. 경도 전용 경계의 경우 북위와 남위로 각각 90 및 -90를 사용합니다. |
cameraPosition
attr: camera-position |
LatLngAltitude로 지정된 카메라의 위치입니다. 생략하면 파생됩니다.
center를 생략하고 cameraPosition를 지정하면 center는 cameraPosition.에서 파생됩니다. 동일한 실행 루프에서 둘 다 업데이트되면 cameraPosition가 우선 적용됩니다. cameraPosition 및 center 필드는 지정된 공유 방향, 범위, 롤, 기울기의 컨텍스트에서 서로 일대일로 파생될 수 있습니다.HTML 속성: camera-position="lat,lng,altitude" |
center
attr: center |
LatLngAltitude로 지정된 지도의 중심입니다. 여기서 고도는 평균 해수면 위의 미터 단위입니다.
range 필드가 지도 중심에서 카메라의 거리에 영향을 미치므로 이 위치가 반드시 카메라가 있는 위치는 아닙니다. 설정하지 않으면 기본값은 {lat: 0, lng: 0, altitude: 63170000}입니다. 63,170,000m는 허용되는 최대 고도입니다 (지구 반지름에 10을 곱한 값).HTML 속성: center="lat,lng,altitude" |
defaultUIHidden
attr: default-ui-hidden |
입력 유형:
boolean optional출력 유형: boolean기본값:
falsetrue인 경우 모든 기본 UI 버튼이 숨겨집니다.HTML 속성: default-ui-hidden |
description
attr: description |
입력 유형:
string optional출력 유형: string optional접근성 설명 (예: 스크린 리더와 함께 사용)이 제공되면 제공된 값과 함께 지도에 추가됩니다.
HTML 속성: description="string" |
fov
attr: fov |
입력 유형:
number optional출력 유형: number optional수직 시야를 도 단위로 지정합니다. 유효한 값의 범위는 5.0~80.0입니다. 값이 클수록 표시 영역이 늘어나지만 원근 왜곡이 발생할 수 있습니다. 기본값: 35.0
HTML 속성: fov="number" |
gestureHandling
attr: gesture-handling |
공동 동작 처리를 제어합니다.
COOPERATIVE로 설정하면 지도를 스크롤하는 데 특수키 또는 두 손가락 동작이 필요합니다. GREEDY로 설정하면 지도 요소의 사용자 이벤트에서 호스트 페이지를 스크롤할 수 없습니다. AUTO로 설정하면 호스트 페이지의 스크롤 가능 여부에 따라 동작 처리가 결정됩니다.HTML 속성: gesture-handling="value-name" |
heading
attr: heading |
입력 유형:
number optional출력 유형: number optional지도의 나침반 방향(단위: 도)으로, 정북은 0입니다. 기울기가 없으면 모든 롤이 방향으로 해석됩니다.
HTML 속성: heading="number" |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
초기화 도구에 사용 저작자 표시 ID를 추가합니다. 이를 통해 Google은 마커 클러스터링 라이브러리 사용과 같이 개발자에게 유용한 라이브러리와 샘플을 파악할 수 있습니다. 사용 기여 분석 ID 전송을 선택 해제하려면 이 속성을 삭제해도 됩니다. 고유한 값만 전송됩니다. 인스턴스화 후 이 값을 변경하면 무시될 수 있습니다.
HTML 속성: internal-usage-attribution-ids="id1 id2" |
language |
입력 유형:
string optional출력 유형: string optional기본 지도의 언어를 렌더링할 언어입니다. Maps JS API를 로드할 때 개발자가 요청한 언어로 기본 설정됩니다. |
mapId
attr: map-id |
입력 유형:
string optional출력 유형: string optional지도의 클라우드 기반 지도 스타일을 가져오는 데 사용할 지도 ID를 지정합니다.
HTML 속성: map-id="string" |
maxAltitude
attr: max-altitude |
입력 유형:
number optional출력 유형: number optional지도에 표시되는 지면 위의 최대 고도입니다.
0~63170000m (지구 반지름에 10을 곱한 값) 사이의 값이 유효합니다.HTML 속성: max-altitude="number" |
maxHeading
attr: max-heading |
입력 유형:
number optional출력 유형: number optional지도의 최대 방향 (회전) 각도입니다. 유효한 값은
0~360도입니다. minHeading 및 maxHeading는 머리 동작이 허용되는 360도 이하의 간격을 나타냅니다. minHeading = 180 및 maxHeading = 90는 [0, 90]의 제목과 [180, 360]의 제목을 허용합니다. minHeading = 90 및 maxHeading = 180은 [90, 180]에서 방향을 허용합니다.HTML 속성: max-heading="number" |
maxTilt
attr: max-tilt |
입력 유형:
number optional출력 유형: number optional지도의 최대 입사각입니다. 유효한 값은
0~90도입니다.HTML 속성: max-tilt="number" |
minAltitude
attr: min-altitude |
입력 유형:
number optional출력 유형: number optional지도에 표시되는 지면 위의 최소 고도입니다.
0~63170000m (지구 반지름에 10을 곱한 값) 사이의 값이 유효합니다.HTML 속성: min-altitude="number" |
minHeading
attr: min-heading |
입력 유형:
number optional출력 유형: number optional지도의 최소 방향 (회전) 각도입니다. 유효한 값은
0~360도입니다. minHeading 및 maxHeading는 머리 동작이 허용되는 360도 이하의 간격을 나타냅니다. minHeading = 180 및 maxHeading = 90는 [0, 90]의 제목과 [180, 360]의 제목을 허용합니다. minHeading = 90 및 maxHeading = 180에서 [90, 180] 방향으로 이동할 수 있습니다.HTML 속성: min-heading="number" |
minTilt
attr: min-tilt |
입력 유형:
number optional출력 유형: number optional지도의 최소 입사각입니다. 유효한 값은
0~90도입니다.HTML 속성: min-tilt="number" |
mode
attr: mode |
지도가 렌더링되는 모드를 지정합니다. 설정하지 않으면 지도가 렌더링되지 않습니다.
HTML 속성: mode="value-name" |
range
attr: range |
입력 유형:
number optional출력 유형: number optional카메라에서 지도 중심까지의 거리(미터)입니다.
HTML 속성: range="number" |
region |
입력 유형:
string optional출력 유형: string optional기본 지도의 관심 장소를 렌더링할 리전입니다. Maps JS API를 로드할 때 개발자가 요청한 지역으로 기본 설정됩니다. |
roll
attr: roll |
입력 유형:
number optional출력 유형: number optional뷰 벡터를 중심으로 한 카메라의 롤(도)입니다. 모호성을 해결하기 위해 기울기가 없는 경우 모든 롤은 방향으로 해석됩니다.
HTML 속성: roll="number" |
tilt
attr: tilt |
입력 유형:
number optional출력 유형: number optional카메라 뷰 벡터의 기울기(도)입니다. 지구를 바로 내려다보는 뷰 벡터의 기울기는 0도입니다. 지구에서 멀어지는 방향을 가리키는 뷰 벡터의 기울기는
180도입니다.HTML 속성: tilt="number" |
attr: default-ui-disabled |
유형:
boolean optional기본값:
falsetrue인 경우 모든 기본 UI 버튼이 사용 중지됩니다. 키보드 및 동작 컨트롤을 사용 중지하지 않습니다.HTML 속성: default-ui-disabled |
메서드 | |
|---|---|
flyCameraAround |
flyCameraAround(options)매개변수:
반환 값: 없음
이 메서드는 지정된 시간 동안 지정된 위치를 중심으로 카메라를 회전합니다. 애니메이션은 지정된 FlyAroundAnimationOptions.repeatCount 횟수만큼 반복될 수 있습니다. 카메라가 시계 방향으로 이동합니다. 궤도를 도는 위치는 CameraOptions.center를 통해 지정됩니다. 이 위치는 궤도 애니메이션 중에 표시 영역 중앙에 표시되며, 카메라가 이 위치를 중심으로 움직입니다. 이 메서드는 비동기식입니다. 애니메이션은 지도가 최소한으로 로드된 후에만 시작할 수 있기 때문입니다. 애니메이션이 시작되면 메서드가 반환됩니다. FlyAroundAnimationOptions.repeatCount 횟수가 0이면 회전이 발생하지 않으며 애니메이션이 시작된 직후에 완료됩니다. |
flyCameraTo |
flyCameraTo(options)매개변수:
반환 값: 없음
이 메서드는 지정된 시간 동안 카메라를 현재 위치에서 지정된 종료 위치로 포물선 형태로 이동합니다. 종료 위치는 정확한 카메라 위치를 제어하는 CameraOptions.cameraPosition 또는 지도의 표시되는 표시 영역 중심을 제어하는 CameraOptions.center를 통해 지정할 수 있습니다. 이 메서드는 비동기식입니다. 애니메이션은 지도가 최소한으로 로드된 후에만 시작할 수 있기 때문입니다. 애니메이션이 시작되면 메서드가 반환됩니다. |
stopCameraAnimation |
stopCameraAnimation()매개변수: 없음
반환 값: 없음
이 메서드는 실행 중인 플라이 애니메이션을 중지합니다. 카메라는 애니메이션 중간에 있는 위치에 그대로 유지되며 끝 지점으로 순간 이동하지 않습니다. 이 메서드는 지도가 최소한의 양을 로드한 후에만 애니메이션을 시작하거나 중지할 수 있으므로 비동기식입니다. 애니메이션이 중지되면 메서드가 반환됩니다. |
상속됨:
addEventListener,
removeEventListener
| |
이벤트 | |
|---|---|
gmp-animationend |
function(animationEndEvent)인수:
이 이벤트는 비행 애니메이션이 종료될 때 실행됩니다. 이 이벤트는 DOM 트리를 통해 버블링됩니다. |
gmp-camerapositionchange |
function(cameraPositionChangeEvent)인수:
이 이벤트는 Map3DElement의 cameraPosition 속성이 변경될 때 실행됩니다. |
gmp-centerchange |
function(centerChangeEvent)인수:
이 이벤트는 Map3DElement의 center 속성이 변경될 때 발생합니다. |
gmp-click |
function(clickEvent)인수:
이 이벤트는 Map3DElement 요소를 클릭하면 실행됩니다. |
gmp-error |
function(mapInitializationErrorEvent)인수:
이 이벤트는 지도가 초기화되지 않을 때 실행됩니다. |
gmp-fovchange |
function(fovChangeEvent)인수:
이 이벤트는 Map3DElement의 fov 속성이 변경될 때 실행됩니다. |
gmp-headingchange |
function(headingChangeEvent)인수:
이 이벤트는 Map3DElement의 heading 속성이 변경될 때 발생합니다. |
gmp-map-id-error |
function(mapIdErrorEvent)인수:
이 이벤트는 Map3DElement의 mapId 속성이 잘못된 경우에 실행됩니다. |
gmp-rangechange |
function(rangeChangeEvent)인수:
이 이벤트는 Map3DElement의 범위 속성이 변경될 때 실행됩니다. |
gmp-rollchange |
function(rollChangeEvent)인수:
이 이벤트는 Map3DElement의 roll 속성이 변경될 때 실행됩니다. |
gmp-steadychange |
function(steadyChangeEvent)인수:
이 이벤트는 Map3DElement의 안정 상태가 변경될 때 실행됩니다. |
gmp-tiltchange |
function(tiltChangeEvent)인수:
이 이벤트는 Map3DElement의 기울기 속성이 변경될 때 발생합니다. |
Map3DElementOptions 인터페이스
google.maps.maps3d.Map3DElementOptions 인터페이스
Map3DElement에 설정할 수 있는 속성을 정의하는 데 사용되는 Map3DElementOptions 객체입니다.
MapMode 상수
google.maps.maps3d.MapMode
상수
라이브러리 "maps3d"
지도가 렌더링되는 모드를 지정합니다.
이러한 상수는 문자열로도 사용할 수 있습니다. TypeScript에서 문자열 리터럴은 MapModeString 유형으로 정의됩니다.
const {MapMode} = await google.maps.importLibrary("maps3d");
상수 | |
|---|---|
HYBRID |
이 지도 모드는 위성 또는 사실적인 이미지에 주요 도로의 투명한 레이어를 표시합니다. |
|
이 지도 모드는 일반 도로 지도를 표시합니다. |
SATELLITE |
이 지도 모드에서는 위성 이미지 또는 포토리얼리스틱 이미지를 표시합니다(제공되는 경우). |
GestureHandling 상수
google.maps.maps3d.GestureHandling
상수
라이브러리 "maps3d"
지도 요소에서 동작 이벤트를 처리하는 방법을 지정합니다.
이러한 상수는 문자열로도 사용할 수 있습니다. TypeScript에서 문자열 리터럴은 GestureHandlingString 유형으로 정의됩니다.
const {GestureHandling} = await google.maps.importLibrary("maps3d");
상수 | |
|---|---|
AUTO |
이렇게 하면 지도에서 협력적 동작 처리 또는 적극적 동작 처리를 사용할지 선택할 수 있습니다. 지정하지 않은 경우 기본 동작입니다. 이렇게 하면 지도가 스크롤 상위 요소 (일반적으로 호스트 페이지)를 지배하여 사용자가 지도에서 다른 콘텐츠로 스크롤할 수 없는 경우 지도가 협력 모드로 전환됩니다. |
COOPERATIVE |
이렇게 하면 지도를 스크롤하기 위해 특수키 또는 두 손가락 동작이 필요한 협력 모드가 강제 적용됩니다. |
GREEDY |
이렇게 하면 지도 요소의 사용자 이벤트에서 호스트 페이지를 스크롤할 수 없는 탐욕 모드가 강제 적용됩니다. |
AutofitsCameraAnimation 상수
google.maps.maps3d.AutofitsCameraAnimation
상수
라이브러리 "maps3d"
선택한 하위 요소를 기준으로 중심을 맞추기 위해 카메라가 새 위치로 이동할 때의 동작을 지정합니다.
이러한 상수는 문자열로도 사용할 수 있습니다. TypeScript에서 문자열 리터럴은 AutofitsCameraAnimationString 유형으로 정의됩니다.
const {AutofitsCameraAnimation} = await google.maps.importLibrary("maps3d");
상수 | |
|---|---|
FLY_TO |
새 위치로 이동합니다. |
NONE |
애니메이션 없이 새 위치로 이동합니다. |
FlyAroundAnimationOptions 인터페이스
google.maps.maps3d.FlyAroundAnimationOptions 인터페이스
FlyCameraAround 애니메이션의 맞춤설정 옵션입니다.
속성 | |
|---|---|
camera |
유형:
CameraOptions궤도 애니메이션 중에 카메라가 바라봐야 하는 중심점입니다. 카메라가 이 중심점을 중심으로 공전함에 따라 지도 방향이 변경됩니다. |
durationMillis
선택사항 |
유형:
number optional애니메이션 주기 1회의 재생 시간(밀리초)입니다. |
repeatCount
선택사항 |
유형:
number optional애니메이션을 반복할 횟수를 지정합니다. 숫자가 0이면 애니메이션이 시작된 직후에 완료됩니다. Number.Infinity가 전달되면 애니메이션이 무한 반복됩니다. |
선택사항 |
유형:
number optional지정된 시간 동안 중심을 기준으로 회전하는 횟수입니다. 이 설정은 전체 회전 속도를 제어합니다. rounds에 음수를 전달하면 카메라가 기본 시계 방향 대신 시계 반대 방향으로 회전합니다. |
FlyToAnimationOptions 인터페이스
google.maps.maps3d.FlyToAnimationOptions 인터페이스
FlyCameraTo 애니메이션의 맞춤설정 옵션입니다.
속성 | |
|---|---|
endCamera |
유형:
CameraOptions애니메이션이 끝날 때 카메라가 가리켜야 하는 위치입니다. |
durationMillis
선택사항 |
유형:
number optional애니메이션 재생 시간(밀리초)입니다. 기간을 0으로 설정하면 카메라가 종료 위치로 바로 이동합니다. |
CameraOptions 인터페이스
google.maps.maps3d.CameraOptions 인터페이스
카메라 객체에 설정할 수 있는 속성을 정의하는 데 사용되는 CameraOptions 객체입니다. 카메라 객체는 카메라 위치가 있는 모든 객체(예: 현재 지도 상태 또는 향후 요청된 애니메이션 상태)가 될 수 있습니다.
속성 | |
|---|---|
altitudeMode
선택사항 |
유형:
AltitudeMode optional지정된 CameraOptions 객체의 고도 값을 해석하는 방법을 지정하는 enum입니다. 이렇게 하면 기존 AltitudeMode enum이 재사용됩니다. |
cameraPosition
선택사항 |
유형:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optionalMap3DElement.cameraPosition를 참조하세요. |
center
선택사항 |
유형:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optionalMap3DElement.center를 참조하세요. |
fov
선택사항 |
유형:
number optionalMap3DElement.fov를 참조하세요. |
heading
선택사항 |
유형:
number optionalMap3DElement.heading를 참조하세요. |
range
선택사항 |
유형:
number optionalMap3DElement.range를 참조하세요. |
roll
선택사항 |
유형:
number optionalMap3DElement.roll를 참조하세요. |
tilt
선택사항 |
유형:
number optionalMap3DElement.tilt를 참조하세요. |
SteadyChangeEvent 클래스
google.maps.maps3d.SteadyChangeEvent
class
extends Event
library "maps3d"
이 이벤트는 Map3DElement의 안정적인 상태를 모니터링하여 생성됩니다. 이 이벤트는 DOM 트리를 통해 버블링됩니다.
const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d");
속성 | |
|---|---|
isSteady |
유형:
booleanMap3DElement가 안정적인지 (즉, 현재 장면에 대한 모든 렌더링이 완료되었는지) 여부를 나타냅니다. |
LocationClickEvent 클래스
google.maps.maps3d.LocationClickEvent
class
extends Event
library "maps3d"
이 이벤트는 Map3DElement를 클릭하면 생성됩니다.
const {LocationClickEvent} = await google.maps.importLibrary("maps3d");
속성 | |
|---|---|
position |
유형:
LatLngAltitude optional이벤트가 발생했을 때 커서 아래에 있던 위도/경도/고도입니다. 더 거친 수준에서는 정확도가 떨어지는 데이터가 반환됩니다. 또한 카메라 위치가 높은 경우 해수면을 클릭하면 고도 값으로 해저 고도가 반환될 수 있습니다. 이 이벤트는 DOM 트리를 통해 버블링됩니다. |
PlaceClickEvent 클래스
google.maps.maps3d.PlaceClickEvent
class
extends LocationClickEvent
library "maps3d"
이 이벤트는 Map3DElement에서 장소 아이콘을 클릭하면 생성됩니다. 기본 팝오버가 표시되지 않도록 하려면 이 이벤트에서 preventDefault() 메서드를 호출하여 Map3DElement에서 처리되지 않도록 합니다.
const {PlaceClickEvent} = await google.maps.importLibrary("maps3d");
속성 | |
|---|---|
placeId |
유형:
string지도 지형지물의 장소 ID입니다. |
상속됨:
position
| |
메서드 | |
|---|---|
fetchPlace |
fetchPlace()매개변수: 없음
이 장소 ID의 Place를 가져옵니다. 결과 Place 객체에서 id 속성이 채워집니다. 추가 필드는 일반 Places API 사용 설정 및 결제에 따라 Place.fetchFields()를 통해 요청할 수 있습니다. Place를 가져오는 중에 오류가 발생하면 프로미스가 거부됩니다. |