3D Maps

Map3DElement 클래스

google.maps.maps3d.Map3DElement 클래스

Map3DElement는 3D 지도 뷰의 HTML 인터페이스입니다. 3D 지도가 렌더링을 시작하려면 mode를 설정해야 합니다.

맞춤 요소:
<gmp-map-3d center="lat,lng,altitude" default-ui-hidden description="string" gesture-handling="auto" 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="hybrid" range="number" roll="number" tilt="number" default-ui-disabled></gmp-map-3d>

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 Map3DElementOptions를 구현합니다.

const {Map3DElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.

생성자
Map3DElement	Map3DElement([options]) 매개변수:  options:  Map3DElementOptions optional

속성
bounds	유형:  LatLngBounds|LatLngBoundsLiteral optional 설정하면 지정된 위도/경도 경계 내로 카메라 위치를 제한합니다. 경계 외부의 객체는 계속 렌더링됩니다. 경계는 경도와 위도를 모두 제한하거나 위도 또는 경도만 제한할 수 있습니다. 위도 전용 경계의 경우 서쪽 및 동쪽 경도에 각각 -180 및 180를 사용합니다. 경도 전용 경계의 경우 북위와 남위로 각각 90 및 -90를 사용합니다.
center	유형:  LatLngAltitude|LatLngAltitudeLiteral optional LatLngAltitude로 지정된 지도의 중심입니다. 여기서 고도는 지면으로부터의 높이(미터)입니다. range 필드가 지도 중심에서 카메라의 거리에 영향을 미치므로 이 위치가 반드시 카메라가 있는 위치는 아닙니다. 설정하지 않으면 기본값은 {lat: 0, lng: 0, altitude: 63170000}입니다. 63,170,000m는 허용되는 최대 고도입니다 (지구 반지름에 10을 곱한 값). HTML 속성: <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultUIHidden	유형:  boolean optional 기본값: false true인 경우 모든 기본 UI 버튼이 숨겨집니다. HTML 속성: <gmp-map-3d default-ui-hidden></gmp-map-3d>
description	유형:  string optional 접근성 설명 (예: 스크린 리더와 함께 사용)이 제공되면 제공된 값과 함께 지도에 추가됩니다. HTML 속성: <gmp-map-3d description="string"></gmp-map-3d>
gestureHandling	유형:  GestureHandling optional 기본값: GestureHandling.GREEDY 공동 동작 처리를 제어합니다. COOPERATIVE로 설정하면 지도를 스크롤하는 데 특수키 또는 두 손가락 동작이 필요합니다. GREEDY로 설정하면 지도 요소의 사용자 이벤트에서 호스트 페이지를 스크롤할 수 없습니다. AUTO로 설정하면 호스트 페이지의 스크롤 가능 여부에 따라 동작 처리가 결정됩니다. HTML 속성: <gmp-map-3d gesture-handling="auto"></gmp-map-3d> <gmp-map-3d gesture-handling="cooperative"></gmp-map-3d> <gmp-map-3d gesture-handling="greedy"></gmp-map-3d>
heading	유형:  number optional 지도의 나침반 방향(단위: 도)으로, 정북은 0입니다. 기울기가 없으면 모든 롤이 방향으로 해석됩니다. HTML 속성: <gmp-map-3d heading="number"></gmp-map-3d>
internalUsageAttributionIds	유형:  Iterable<string> optional 초기화 도구에 사용 저작자 표시 ID를 추가합니다. 이를 통해 Google은 마커 클러스터링 라이브러리 사용과 같이 개발자에게 유용한 라이브러리와 샘플을 파악할 수 있습니다. 사용 기여 분석 ID 전송을 선택 해제하려면 이 속성을 삭제해도 됩니다. 고유한 값만 전송됩니다. 인스턴스화 후 이 값을 변경하면 무시될 수 있습니다. HTML 속성: <gmp-map-3d internal-usage-attribution-ids="id1 id2"></gmp-map-3d>
language	유형:  string optional 기본 지도의 언어를 렌더링할 언어입니다. Maps JS API를 로드할 때 개발자가 요청한 언어로 기본 설정됩니다.
mapId	유형:  string optional 지도의 클라우드 기반 지도 스타일을 가져오는 데 사용할 지도 ID를 지정합니다. 지도가 초기화된 후에는 설정하면 안 됩니다. 따라서 초기화 중에만 mapId가 설정되도록 하고 이 속성을 공개 채널에 게시하지 않습니다. HTML 속성: <gmp-map-3d map-id="string"></gmp-map-3d>
maxAltitude	유형:  number optional 지도에 표시되는 지면 위의 최대 고도입니다. 0~63170000m (지구 반지름에 10을 곱한 값) 사이의 값이 유효합니다. HTML 속성: <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading	유형:  number optional 지도의 최대 방향 (회전) 각도입니다. 유효한 값은 0~360도입니다. minHeading 및 maxHeading는 머리 동작이 허용되는 360도 이하의 간격을 나타냅니다. minHeading = 180 및 maxHeading = 90는 [0, 90]의 제목과 [180, 360]의 제목을 허용합니다. minHeading = 90 및 maxHeading = 180에서 [90, 180] 방향으로 이동할 수 있습니다. HTML 속성: <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt	유형:  number optional 지도의 최대 입사각입니다. 유효한 값은 0~90도입니다. HTML 속성: <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude	유형:  number optional 지도에 표시되는 지면 위의 최소 고도입니다. 0~63170000m (지구 반지름에 10을 곱한 값) 사이의 값이 유효합니다. HTML 속성: <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading	유형:  number optional 지도의 최소 방향 (회전) 각도입니다. 유효한 값은 0~360도입니다. minHeading 및 maxHeading는 머리 동작이 허용되는 360도 이하의 간격을 나타냅니다. minHeading = 180 및 maxHeading = 90는 [0, 90]의 제목과 [180, 360]의 제목을 허용합니다. minHeading = 90 및 maxHeading = 180에서 [90, 180] 방향으로 이동할 수 있습니다. HTML 속성: <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt	유형:  number optional 지도의 최소 입사각입니다. 유효한 값은 0~90도입니다. HTML 속성: <gmp-map-3d min-tilt="number"></gmp-map-3d>
mode	유형:  MapMode optional 지도가 렌더링되는 모드를 지정합니다. 설정하지 않으면 지도가 렌더링되지 않습니다. HTML 속성: <gmp-map-3d mode="hybrid"></gmp-map-3d> <gmp-map-3d mode="satellite"></gmp-map-3d>
range	유형:  number optional 카메라에서 지도 중심까지의 거리(미터)입니다. HTML 속성: <gmp-map-3d range="number"></gmp-map-3d>
region	유형:  string optional 기본 지도의 관심 장소를 렌더링할 리전입니다. Maps JS API를 로드할 때 개발자가 요청한 지역으로 기본 설정됩니다.
roll	유형:  number optional 뷰 벡터를 중심으로 한 카메라의 롤(도)입니다. 모호성을 해결하기 위해 기울기가 없는 경우 모든 롤은 방향으로 해석됩니다. HTML 속성: <gmp-map-3d roll="number"></gmp-map-3d>
tilt	유형:  number optional 카메라 뷰 벡터의 기울기(도)입니다. 지구를 바로 내려다보는 뷰 벡터의 기울기는 0도입니다. 지구에서 멀어지는 방향을 가리키는 뷰 벡터의 기울기는 180도입니다. HTML 속성: <gmp-map-3d tilt="number"></gmp-map-3d>
defaultUIDisabled	지원 중단됨: 대신 Map3DElement.defaultUIHidden를 사용하세요. 이 속성은 향후 출시 버전에서 삭제될 예정입니다. 유형:  boolean optional 기본값: false true인 경우 모든 기본 UI 버튼이 사용 중지됩니다. 키보드 및 동작 컨트롤을 사용 중지하지 않습니다. HTML 속성: <gmp-map-3d default-ui-disabled></gmp-map-3d>

메서드
addEventListener	addEventListener(type, listener[, options]) 매개변수:  type:  string 수신 대기할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다. listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다. options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다. 반환 값:  void 지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
flyCameraAround	flyCameraAround(options) 매개변수:  options:  FlyAroundAnimationOptions 반환 값: 없음 이 메서드는 지정된 시간 동안 지정된 위치를 중심으로 카메라를 회전합니다. 애니메이션은 지정된 FlyAroundAnimationOptions.repeatCount 횟수만큼 반복될 수 있습니다. 카메라가 시계 방향으로 이동합니다. 이 메서드는 비동기식입니다. 애니메이션은 지도가 최소한으로 로드된 후에만 시작할 수 있기 때문입니다. 애니메이션이 시작되면 메서드가 반환됩니다. FlyAroundAnimationOptions.repeatCount 횟수가 0이면 회전이 발생하지 않으며 애니메이션이 시작된 직후에 완료됩니다.
flyCameraTo	flyCameraTo(options) 매개변수:  options:  FlyToAnimationOptions 반환 값: 없음 이 메서드는 지정된 시간 동안 카메라를 현재 위치에서 지정된 종료 위치로 포물선 형태로 이동합니다. 이 메서드는 비동기식입니다. 애니메이션은 지도가 최소한으로 로드된 후에만 시작할 수 있기 때문입니다. 애니메이션이 시작되면 메서드가 반환됩니다.
removeEventListener	removeEventListener(type, listener[, options]) 매개변수:  type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다. listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다. options:  boolean|EventListenerOptions optional 옵션을 참고하세요. 반환 값:  void addEventListener로 이전에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요.
stopCameraAnimation	stopCameraAnimation() 매개변수: 없음 반환 값: 없음 이 메서드는 실행 중인 플라이 애니메이션을 중지합니다. 카메라는 애니메이션 중간에 있는 위치에 그대로 유지되며 끝 지점으로 순간 이동하지 않습니다. 이 메서드는 지도가 최소한의 양을 로드한 후에만 애니메이션을 시작하거나 중지할 수 있으므로 비동기식입니다. 애니메이션이 중지되면 메서드가 반환됩니다.

이벤트
gmp-animationend	function(animationEndEvent) 인수:  animationEndEvent:  Event 이 이벤트는 비행 애니메이션이 종료될 때 실행됩니다. 이 이벤트는 DOM 트리를 통해 버블링됩니다.
gmp-centerchange	function(centerChangeEvent) 인수:  centerChangeEvent:  Event 이 이벤트는 Map3DElement의 center 속성이 변경될 때 발생합니다.
gmp-click	function(clickEvent) 인수:  clickEvent:  LocationClickEvent|PlaceClickEvent 이 이벤트는 Map3DElement 요소를 클릭하면 실행됩니다.
gmp-error	function(mapInitializationErrorEvent) 인수:  mapInitializationErrorEvent:  Event 이 이벤트는 지도가 초기화되지 않을 때 실행됩니다.
gmp-headingchange	function(headingChangeEvent) 인수:  headingChangeEvent:  Event 이 이벤트는 Map3DElement의 heading 속성이 변경될 때 발생합니다.
gmp-map-id-error	function(mapIdErrorEvent) 인수:  mapIdErrorEvent:  Event 이 이벤트는 Map3DElement의 mapId 속성이 잘못된 경우에 실행됩니다.
gmp-rangechange	function(rangeChangeEvent) 인수:  rangeChangeEvent:  Event 이 이벤트는 Map3DElement의 범위 속성이 변경될 때 실행됩니다.
gmp-rollchange	function(rollChangeEvent) 인수:  rollChangeEvent:  Event 이 이벤트는 Map3DElement의 roll 속성이 변경될 때 실행됩니다.
gmp-steadychange	function(steadyChangeEvent) 인수:  steadyChangeEvent:  SteadyChangeEvent 이 이벤트는 Map3DElement의 안정 상태가 변경될 때 실행됩니다.
gmp-tiltchange	function(tiltChangeEvent) 인수:  tiltChangeEvent:  Event 이 이벤트는 Map3DElement의 기울기 속성이 변경될 때 발생합니다.

Map3DElementOptions 인터페이스

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

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

속성
bounds optional	유형:  LatLngBounds|LatLngBoundsLiteral optional Map3DElement.bounds를 참조하세요.
center optional	유형:  LatLngAltitude|LatLngAltitudeLiteral optional Map3DElement.center를 참조하세요.
defaultUIDisabled optional	지원 중단됨: 대신 Map3DElement.defaultUIHidden를 사용하세요. 이 속성은 향후 출시 버전에서 삭제될 예정입니다. 유형:  boolean optional Map3DElement.defaultUIDisabled를 참조하세요.
defaultUIHidden optional	유형:  boolean optional Map3DElement.defaultUIHidden를 참조하세요.
description optional	유형:  string optional Map3DElement.description를 참조하세요.
gestureHandling optional	유형:  GestureHandling optional Map3DElement.gestureHandling를 참조하세요.
heading optional	유형:  number optional Map3DElement.heading를 참조하세요.
internalUsageAttributionIds optional	유형:  Iterable<string> optional Map3DElement.internalUsageAttributionIds를 참조하세요.
language optional	유형:  string optional Map3DElement.language를 참조하세요.
mapId optional	유형:  string optional Map3DElement.mapId를 참조하세요.
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를 참조하세요.
mode optional	유형:  MapMode optional Map3DElement.mode를 참조하세요.
range optional	유형:  number optional Map3DElement.range를 참조하세요.
region optional	유형:  string optional Map3DElement.region를 참조하세요.
roll optional	유형:  number optional Map3DElement.roll를 참조하세요.
tilt optional	유형:  number optional Map3DElement.tilt를 참조하세요.

MapMode 상수

google.maps.maps3d.MapMode 상수

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

const {MapMode} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.

상수
HYBRID	이 지도 모드는 위성 또는 사실적인 이미지에 주요 도로의 투명한 레이어를 표시합니다.
SATELLITE	이 지도 모드에서는 위성 이미지 또는 포토리얼리스틱 이미지를 표시합니다(제공되는 경우).

GestureHandling 상수

google.maps.maps3d.GestureHandling 상수

지도 요소에서 동작 이벤트를 처리하는 방법을 지정합니다.

const {GestureHandling} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.

상수
AUTO	이렇게 하면 지도에서 협력적 동작 처리 또는 적극적 동작 처리를 사용할지 선택할 수 있습니다. 지정하지 않은 경우 기본 동작입니다. 이렇게 하면 지도가 스크롤 상위 요소 (일반적으로 호스트 페이지)를 지배하여 사용자가 지도에서 다른 콘텐츠로 스크롤할 수 없는 경우 지도가 협력 모드로 전환됩니다.
COOPERATIVE	이렇게 하면 지도를 스크롤하기 위해 특수키 또는 두 손가락 동작이 필요한 협력 모드가 강제 적용됩니다.
GREEDY	이렇게 하면 지도 요소의 사용자 이벤트에서 호스트 페이지를 스크롤할 수 없는 탐욕 모드가 강제 적용됩니다.

FlyAroundAnimationOptions 인터페이스

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

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

속성
camera	유형:  CameraOptions 궤도 애니메이션 중에 카메라가 바라봐야 하는 중심점입니다. 카메라가 이 중심점을 중심으로 공전함에 따라 지도 방향이 변경됩니다.
durationMillis optional	유형:  number optional 애니메이션 주기 1회의 재생 시간(밀리초)입니다.
repeatCount optional	유형:  number optional 애니메이션을 반복할 횟수를 지정합니다. 숫자가 0이면 애니메이션이 시작된 직후에 완료됩니다.
rounds optional	지원 중단됨: 대신 FlyAroundAnimationOptions.repeatCount를 사용하세요. 유형:  number optional 지정된 시간 동안 중심을 기준으로 회전하는 횟수입니다. 이 설정은 전체 회전 속도를 제어합니다. rounds에 음수를 전달하면 카메라가 기본 시계 방향 대신 시계 반대 방향으로 회전합니다.

FlyToAnimationOptions 인터페이스

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

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

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

CameraOptions 인터페이스

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

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

속성
center optional	유형:  LatLngAltitude|LatLngAltitudeLiteral optional Map3DElement.center를 참조하세요.
heading optional	유형:  number optional Map3DElement.heading를 참조하세요.
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가 안정적인지 (즉, 현재 장면에 대한 모든 렌더링이 완료되었는지) 여부를 나타냅니다.

LocationClickEvent 클래스

google.maps.maps3d.LocationClickEvent 클래스

이 이벤트는 Map3DElement를 클릭하면 생성됩니다.

이 클래스는 Event를 확장합니다.

const {LocationClickEvent} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.

속성
position	유형:  LatLngAltitude optional 이벤트가 발생했을 때 커서 아래에 있던 위도/경도/고도입니다. 더 거친 수준에서는 정확도가 떨어지는 데이터가 반환됩니다. 또한 카메라 위치가 높은 경우 해수면을 클릭하면 고도 값으로 해저 고도가 반환될 수 있습니다. 이 이벤트는 DOM 트리를 통해 버블링됩니다.

PlaceClickEvent 클래스

google.maps.maps3d.PlaceClickEvent 클래스

이 이벤트는 Map3DElement에서 장소 아이콘을 클릭하면 생성됩니다. 기본 팝오버가 표시되지 않도록 하려면 이 이벤트에서 preventDefault() 메서드를 호출하여 Map3DElement에서 처리되지 않도록 합니다.

이 클래스는 LocationClickEvent를 확장합니다.

const {PlaceClickEvent} = await google.maps.importLibrary("maps3d")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.

속성
placeId	유형:  string 지도 지형지물의 장소 ID입니다.
상속됨: position

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