3D Maps

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])
매개변수:
AlphaautofitsCameraAnimation
attr: autofits-camera-animation
입력 유형: AutofitsCameraAnimation optional
출력 유형: AutofitsCameraAnimation optional
기본값: none
자동 카메라 맞춤에 사용할 애니메이션입니다.
HTML 속성: autofits-camera-animation="value-name"
bounds
입력 유형: LatLngBounds|LatLngBoundsLiteral optional
출력 유형: LatLngBounds optional
설정하면 지정된 위도/경도 경계 내로 카메라 위치를 제한합니다. 경계 외부의 객체는 계속 렌더링됩니다. 경계는 경도와 위도를 모두 제한하거나 위도 또는 경도만 제한할 수 있습니다. 위도 전용 경계의 경우 서쪽 및 동쪽 경도에 각각 -180 및 180를 사용합니다. 경도 전용 경계의 경우 북위와 남위로 각각 90 및 -90를 사용합니다.
cameraPosition
attr: camera-position
입력 유형: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional
출력 유형: LatLngAltitude optional
LatLngAltitude로 지정된 카메라의 위치입니다. 생략하면 파생됩니다. center를 생략하고 cameraPosition를 지정하면 center는 cameraPosition.에서 파생됩니다. 동일한 실행 루프에서 둘 다 업데이트되면 cameraPosition가 우선 적용됩니다. cameraPosition 및 center 필드는 지정된 공유 방향, 범위, 롤, 기울기의 컨텍스트에서 서로 일대일로 파생될 수 있습니다.
HTML 속성: camera-position="lat,lng,altitude"
center
attr: center
입력 유형: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional
출력 유형: LatLngAltitude optional
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
기본값: false
true인 경우 모든 기본 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
입력 유형: GestureHandling optional
출력 유형: GestureHandling
공동 동작 처리를 제어합니다. 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
입력 유형: Iterable<string> optional
출력 유형: Array<string> optional
초기화 도구에 사용 저작자 표시 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
입력 유형: MapMode optional
출력 유형: MapMode optional
지도가 렌더링되는 모드를 지정합니다. 설정하지 않으면 지도가 렌더링되지 않습니다.
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"
defaultUIDisabled
attr: default-ui-disabled
유형: boolean optional
기본값: false
true인 경우 모든 기본 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)
인수:
  • animationEndEvent: Event optional
이 이벤트는 비행 애니메이션이 종료될 때 실행됩니다. 이 이벤트는 DOM 트리를 통해 버블링됩니다.
gmp-camerapositionchange
function(cameraPositionChangeEvent)
인수:
  • cameraPositionChangeEvent: Event optional
이 이벤트는 Map3DElement의 cameraPosition 속성이 변경될 때 실행됩니다.
gmp-centerchange
function(centerChangeEvent)
인수:
  • centerChangeEvent: Event optional
이 이벤트는 Map3DElement의 center 속성이 변경될 때 발생합니다.
gmp-click
function(clickEvent)
인수:
이 이벤트는 Map3DElement 요소를 클릭하면 실행됩니다.
gmp-error
function(mapInitializationErrorEvent)
인수:
  • mapInitializationErrorEvent: Event optional
이 이벤트는 지도가 초기화되지 않을 때 실행됩니다.
gmp-fovchange
function(fovChangeEvent)
인수:
  • fovChangeEvent: Event optional
이 이벤트는 Map3DElement의 fov 속성이 변경될 때 실행됩니다.
gmp-headingchange
function(headingChangeEvent)
인수:
  • headingChangeEvent: Event optional
이 이벤트는 Map3DElement의 heading 속성이 변경될 때 발생합니다.
gmp-map-id-error
function(mapIdErrorEvent)
인수:
  • mapIdErrorEvent: Event optional
이 이벤트는 Map3DElement의 mapId 속성이 잘못된 경우에 실행됩니다.
gmp-rangechange
function(rangeChangeEvent)
인수:
  • rangeChangeEvent: Event optional
이 이벤트는 Map3DElement의 범위 속성이 변경될 때 실행됩니다.
gmp-rollchange
function(rollChangeEvent)
인수:
  • rollChangeEvent: Event optional
이 이벤트는 Map3DElement의 roll 속성이 변경될 때 실행됩니다.
gmp-steadychange
function(steadyChangeEvent)
인수:
이 이벤트는 Map3DElement의 안정 상태가 변경될 때 실행됩니다.
gmp-tiltchange
function(tiltChangeEvent)
인수:
  • tiltChangeEvent: Event optional
이 이벤트는 Map3DElement의 기울기 속성이 변경될 때 발생합니다.

Map3DElementOptions 인터페이스

google.maps.maps3d.Map3DElementOptions 인터페이스

Map3DElement에 설정할 수 있는 속성을 정의하는 데 사용되는 Map3DElementOptions 객체입니다.

AlphaautofitsCameraAnimation
선택사항
유형: AutofitsCameraAnimation optional
bounds
선택사항
Map3DElement.bounds를 참조하세요.
cameraPosition
선택사항
Map3DElement.cameraPosition를 참조하세요.
center
선택사항
Map3DElement.center를 참조하세요.
defaultUIDisabled
선택사항
유형: boolean optional
Map3DElement.defaultUIDisabled를 참조하세요.
defaultUIHidden
선택사항
유형: boolean optional
Map3DElement.defaultUIHidden를 참조하세요.
description
선택사항
유형: string optional
Map3DElement.description를 참조하세요.
fov
선택사항
유형: number optional
Map3DElement.fov를 참조하세요.
gestureHandling
선택사항
유형: GestureHandling optional
Map3DElement.gestureHandling를 참조하세요.
heading
선택사항
유형: number optional
Map3DElement.heading를 참조하세요.
internalUsageAttributionIds
선택사항
유형: Iterable<string> optional
language
선택사항
유형: string optional
Map3DElement.language를 참조하세요.
mapId
선택사항
유형: string optional
Map3DElement.mapId를 참조하세요.
maxAltitude
선택사항
유형: number optional
Map3DElement.maxAltitude를 참조하세요.
maxHeading
선택사항
유형: number optional
Map3DElement.maxHeading를 참조하세요.
maxTilt
선택사항
유형: number optional
Map3DElement.maxTilt를 참조하세요.
minAltitude
선택사항
유형: number optional
Map3DElement.minAltitude를 참조하세요.
minHeading
선택사항
유형: number optional
Map3DElement.minHeading를 참조하세요.
minTilt
선택사항
유형: number optional
Map3DElement.minTilt를 참조하세요.
mode
선택사항
유형: MapMode optional
Map3DElement.mode를 참조하세요.
range
선택사항
유형: number optional
Map3DElement.range를 참조하세요.
region
선택사항
유형: string optional
Map3DElement.region를 참조하세요.
roll
선택사항
유형: number optional
Map3DElement.roll를 참조하세요.
tilt
선택사항
유형: number optional
Map3DElement.tilt를 참조하세요.

MapMode 상수

google.maps.maps3d.MapMode 상수
라이브러리 "maps3d"

지도가 렌더링되는 모드를 지정합니다.

이러한 상수는 문자열로도 사용할 수 있습니다. TypeScript에서 문자열 리터럴은 MapModeString 유형으로 정의됩니다.

const {MapMode} = await google.maps.importLibrary("maps3d");
HYBRID 이 지도 모드는 위성 또는 사실적인 이미지에 주요 도로의 투명한 레이어를 표시합니다.
AlphaROADMAP 이 지도 모드는 일반 도로 지도를 표시합니다.
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
궤도 애니메이션 중에 카메라가 바라봐야 하는 중심점입니다. 카메라가 이 중심점을 중심으로 공전함에 따라 지도 방향이 변경됩니다.
durationMillis
선택사항
유형: number optional
애니메이션 주기 1회의 재생 시간(밀리초)입니다.
repeatCount
선택사항
유형: number optional
애니메이션을 반복할 횟수를 지정합니다. 숫자가 0이면 애니메이션이 시작된 직후에 완료됩니다. Number.Infinity가 전달되면 애니메이션이 무한 반복됩니다.
rounds
선택사항
유형: number optional
지정된 시간 동안 중심을 기준으로 회전하는 횟수입니다. 이 설정은 전체 회전 속도를 제어합니다. rounds에 음수를 전달하면 카메라가 기본 시계 방향 대신 시계 반대 방향으로 회전합니다.

FlyToAnimationOptions 인터페이스

google.maps.maps3d.FlyToAnimationOptions 인터페이스

FlyCameraTo 애니메이션의 맞춤설정 옵션입니다.

endCamera
애니메이션이 끝날 때 카메라가 가리켜야 하는 위치입니다.
durationMillis
선택사항
유형: number optional
애니메이션 재생 시간(밀리초)입니다. 기간을 0으로 설정하면 카메라가 종료 위치로 바로 이동합니다.

CameraOptions 인터페이스

google.maps.maps3d.CameraOptions 인터페이스

카메라 객체에 설정할 수 있는 속성을 정의하는 데 사용되는 CameraOptions 객체입니다. 카메라 객체는 카메라 위치가 있는 모든 객체(예: 현재 지도 상태 또는 향후 요청된 애니메이션 상태)가 될 수 있습니다.

altitudeMode
선택사항
유형: AltitudeMode optional
지정된 CameraOptions 객체의 고도 값을 해석하는 방법을 지정하는 enum입니다. 이렇게 하면 기존 AltitudeMode enum이 재사용됩니다.
cameraPosition
선택사항
Map3DElement.cameraPosition를 참조하세요.
center
선택사항
Map3DElement.center를 참조하세요.
fov
선택사항
유형: number optional
Map3DElement.fov를 참조하세요.
heading
선택사항
유형: number optional
Map3DElement.heading를 참조하세요.
range
선택사항
유형: number optional
Map3DElement.range를 참조하세요.
roll
선택사항
유형: number optional
Map3DElement.roll를 참조하세요.
tilt
선택사항
유형: number optional
Map3DElement.tilt를 참조하세요.

SteadyChangeEvent 클래스

google.maps.maps3d.SteadyChangeEvent class
extends Event
library "maps3d"

이 이벤트는 Map3DElement의 안정적인 상태를 모니터링하여 생성됩니다. 이 이벤트는 DOM 트리를 통해 버블링됩니다.

const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d");
isSteady
유형: boolean
Map3DElement가 안정적인지 (즉, 현재 장면에 대한 모든 렌더링이 완료되었는지) 여부를 나타냅니다.

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()
매개변수: 없음
반환 값: Promise<Place>
이 장소 ID의 Place를 가져옵니다. 결과 Place 객체에서 id 속성이 채워집니다. 추가 필드는 일반 Places API 사용 설정 및 결제에 따라 Place.fetchFields()를 통해 요청할 수 있습니다. Place를 가져오는 중에 오류가 발생하면 프로미스가 거부됩니다.