3D Maps

Map3DElement 클래스

google.maps.maps3d.Map3DElement 클래스

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

맞춤 요소:
<gmp-map-3d center="lat,lng,altitude" default-ui-disabled heading="number" 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"></gmp-map-3d>

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

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

const {Map3DElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
Map3DElement
Map3DElement([options])
매개변수: 
bounds
설정된 경우 지정된 위도/경도 범위 내에서 카메라 위치를 제한합니다. 경계 외부의 객체는 계속 렌더링됩니다. 경계는 경도와 위도를 모두 제한할 수도 있고 위도 또는 경도만 제한할 수도 있습니다. 위도 전용 경계의 경우 각각 -180 및 180의 서쪽 및 동쪽 경도를 사용합니다. 경도 전용 경계의 경우 각각 90 및 -90의 북쪽 및 남쪽 위도를 사용합니다.
center
지도의 중심입니다. LatLngAltitude로 지정되며 고도는 지상에서 미터 단위입니다. range 필드는 카메라와 지도 중심 간 거리에 영향을 미치므로 카메라가 반드시 이 위치에 있는 것은 아닙니다. 설정하지 않으면 기본값은 {lat: 0, lng: 0, altitude: 63170000}입니다. 63,170,000미터는 허용되는 최대 고도입니다 (지구 반지름에 10을 곱한 값).
HTML 속성:
  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultUIDisabled
유형:  boolean optional
기본값: false
true인 경우 모든 기본 UI 버튼이 사용 중지됩니다. 키보드 및 동작 컨트롤을 사용 중지하지 않습니다.
HTML 속성:
  • <gmp-map-3d default-ui-disabled></gmp-map-3d>
heading
유형:  number optional
지도의 나침반 방향입니다(단위: 도). 정북은 0입니다. 기울기가 없으면 모든 롤이 방향으로 해석됩니다.
HTML 속성:
  • <gmp-map-3d heading="number"></gmp-map-3d>
maxAltitude
유형:  number optional
지도에 표시되는 지상 위의 최대 고도입니다. 유효한 값은 0~63170000미터 (지구 반지름에 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~63170000미터 (지구 반지름에 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>
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>
BetaaddEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신할 이벤트 유형을 나타내는 대소문자를 구분하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요.
flyCameraAround
flyCameraAround(options)
매개변수: 
반환 값:  None
이 메서드는 지정된 시간 동안 지정된 위치를 중심으로 카메라를 회전시켜 해당 시간 동안 지정된 횟수만큼 회전합니다.

기본적으로 카메라가 시계 방향으로 회전합니다. 라운드에 음수가 지정되면 카메라가 시계 반대 방향으로 회전합니다.

지도가 최소한의 양을 로드한 후에만 애니메이션을 시작할 수 있으므로 이 메서드는 비동기입니다. 애니메이션이 시작되면 메서드가 반환됩니다.

라운드 수가 0이면 회전이 발생하지 않으며 애니메이션이 시작된 직후 완료됩니다.
flyCameraTo
flyCameraTo(options)
매개변수: 
반환 값:  None
이 메서드는 지정된 시간 동안 현재 위치에서 지정된 종료 위치로 카메라를 포물선으로 이동합니다.

지도가 최소한의 양을 로드한 후에만 애니메이션을 시작할 수 있으므로 이 메서드는 비동기입니다. 애니메이션이 시작되면 메서드가 반환됩니다.
BetaremoveEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 타겟에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener을 참고하세요.
stopCameraAnimation
stopCameraAnimation()
매개변수:  없음
반환 값:  None
이 메서드는 실행 중인 플라이 애니메이션을 중지합니다. 카메라가 애니메이션 중간에 있는 위치에 그대로 유지되며 끝점으로 순간 이동하지 않습니다.

지도가 최소한의 양을 로드한 후에만 애니메이션을 시작하거나 중지할 수 있으므로 이 메서드는 비동기입니다. 애니메이션이 중지되면 메서드가 반환됩니다.
gmp-animationend
function(animationEndEvent)
인수: 
  • animationEndEvent:  Event
이 이벤트는 플라이 애니메이션이 종료될 때 발생합니다. 이 이벤트는 DOM 트리를 통해 버블링됩니다.
gmp-centerchange
function(centerChangeEvent)
인수: 
  • centerChangeEvent:  Event
이 이벤트는 Map3DElement의 center 속성이 변경될 때 발생합니다.
gmp-click
function(clickEvent)
인수: 
이 이벤트는 Map3DElement 요소를 클릭하면 발생합니다.
gmp-headingchange
function(headingChangeEvent)
인수: 
  • headingChangeEvent:  Event
이 이벤트는 Map3DElement의 방향 속성이 변경될 때 발생합니다.
gmp-rangechange
function(rangeChangeEvent)
인수: 
  • rangeChangeEvent:  Event
이 이벤트는 Map3DElement의 범위 속성이 변경될 때 발생합니다.
gmp-rollchange
function(rollChangeEvent)
인수: 
  • rollChangeEvent:  Event
이 이벤트는 Map3DElement의 roll 속성이 변경될 때 발생합니다.
gmp-steadychange
function(steadyChangeEvent)
인수: 
이 이벤트는 Map3DElement의 정상 상태가 변경될 때 발생합니다.
gmp-tiltchange
function(tiltChangeEvent)
인수: 
  • tiltChangeEvent:  Event
이 이벤트는 Map3DElement의 기울기 속성이 변경될 때 발생합니다.

Map3DElementOptions 인터페이스

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

Map3DElement에 설정할 수 있는 속성을 정의하는 데 사용되는 Map3DElementOptions 객체입니다.
bounds optional
Map3DElement.bounds를 참조하세요.
center optional
Map3DElement.center를 참조하세요.
defaultUIDisabled optional
유형:  boolean optional
Map3DElement.defaultUIDisabled를 참조하세요.
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를 참조하세요.
mode optional
유형:  MapMode optional
Map3DElement.mode를 참조하세요.
range optional
유형:  number optional
Map3DElement.range를 참조하세요.
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 이 지도 모드에서는 위성 이미지 또는 포토리얼리스틱 이미지가 표시됩니다(사용 가능한 경우).

FlyAroundAnimationOptions 인터페이스

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

FlyCameraAround 애니메이션의 맞춤설정 옵션입니다.
camera
유형:  CameraOptions
궤도 애니메이션 중에 카메라가 바라봐야 하는 중심점입니다. 카메라가 이 중심점을 중심으로 회전하면 지도 방향이 변경됩니다.
durationMillis optional
유형:  number optional
애니메이션의 지속 시간(밀리초)입니다. 단일 회전의 지속 시간이 아닌 애니메이션의 총 지속 시간입니다.
rounds optional
유형:  number optional
지정된 시간 동안 중심을 회전할 라운드 수입니다. 이 설정은 전체 회전 속도를 제어합니다. 음수를 rounds에 전달하면 카메라가 기본 시계 방향 대신 시계 반대 방향으로 회전합니다.

FlyToAnimationOptions 인터페이스

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

FlyCameraTo 애니메이션의 맞춤설정 옵션입니다.
endCamera
유형:  CameraOptions
애니메이션이 끝날 때 카메라가 향해야 하는 위치입니다.
durationMillis optional
유형:  number optional
애니메이션의 지속 시간(밀리초)입니다. 기간이 0이면 카메라가 바로 최종 위치로 순간 이동합니다.

CameraOptions 인터페이스

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

카메라 객체에 설정할 수 있는 속성을 정의하는 데 사용되는 CameraOptions 객체입니다. 카메라 객체는 현재 지도 상태 또는 향후 요청된 애니메이션 상태와 같이 카메라 위치가 있는 모든 항목이 될 수 있습니다.
center 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를 가져오는 중에 오류가 발생하면 프로미스가 거부됩니다.

Marker3DElement 클래스

google.maps.maps3d.Marker3DElement 클래스

3D 지도에 위치를 표시합니다. Marker3DElement이 표시되려면 position이 설정되어야 합니다.

맞춤 요소:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"></gmp-marker-3d>

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

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

const {Marker3DElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
Marker3DElement
Marker3DElement([options])
매개변수: 
지정된 옵션으로 Marker3DElement를 만듭니다.
altitudeMode
유형:  AltitudeMode optional
기본값: AltitudeMode.CLAMP_TO_GROUND
위치의 고도 구성요소가 해석되는 방식을 지정합니다.
HTML 속성:
  • <gmp-marker-3d altitude-mode="absolute"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="clamp-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-mesh"></gmp-marker-3d>
collisionBehavior
유형:  CollisionBehavior optional
기본값: CollisionBehavior.REQUIRED
Marker3DElement가 다른 Marker3DElement 또는 기본 지도 라벨과 충돌할 때 어떻게 동작해야 하는지 지정하는 열거형입니다.
HTML 속성:
  • <gmp-marker-3d collision-behavior="required"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="required-and-hides-optional"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="optional-and-hides-lower-priority"></gmp-marker-3d>
drawsWhenOccluded
유형:  boolean optional
기본값: false
가려진 경우 이 마커를 그릴지 여부를 지정합니다. 마커가 지도 지오메트리 (예: 건물)에 의해 가려질 수 있습니다.
HTML 속성:
  • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
extruded
유형:  boolean optional
기본값: false
마커를 지면에 연결할지 여부를 지정합니다. 마커를 돌출시키려면 altitudeMode가 RELATIVE_TO_GROUND 또는 ABSOLUTE이어야 합니다.
HTML 속성:
  • <gmp-marker-3d extruded></gmp-marker-3d>
label
유형:  string optional
이 마커에 표시할 텍스트입니다.
HTML 속성:
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
마커 끝의 위치입니다. 고도는 특정 모드에서 무시되므로 선택사항입니다.
HTML 속성:
  • <gmp-marker-3d position="lat,lng"></gmp-marker-3d>
  • <gmp-marker-3d position="lat,lng,altitude"></gmp-marker-3d>
sizePreserved
유형:  boolean optional
기본값: false
카메라와의 거리에 관계없이 이 마커가 크기를 유지해야 하는지 여부를 지정합니다. 기본적으로 마커는 카메라/기울기와의 거리에 따라 크기가 조정됩니다.
HTML 속성:
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
유형:  number optional
다른 마커와 비교한 zIndex입니다.
HTML 속성:
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
default
Marker3DElement에 직접 추가된 맞춤 요소는 슬롯에 배치되지만 HTMLImageElement, SVGElement, PinElement 유형의 요소만 마커를 그리는 데 사용되고 다른 요소는 무시됩니다.
, HTMLImageElement, SVGElement는 Marker3DElement의 기본 슬롯에 할당하기 전에 <template> 요소로 래핑해야 합니다.

이미지와 SVG는 현재 3D 장면에서 렌더링되기 전에 래스터화되므로 SVG에 삽입된 맞춤 HTML이나 이미지에 추가된 CSS 클래스가 적용되지 않으며 마커가 화면에 표시될 때 반영되지 않을 수 있습니다.
BetaaddEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신할 이벤트 유형을 나타내는 대소문자를 구분하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요.
BetaremoveEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 타겟에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener을 참고하세요.

Marker3DElementOptions 인터페이스

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

Marker3DElement에서 설정할 수 있는 속성을 정의하는 데 사용되는 Marker3DElementOptions 객체입니다.
altitudeMode optional
유형:  AltitudeMode optional
Marker3DElement.altitudeMode를 참조하세요.
collisionBehavior optional
유형:  CollisionBehavior optional
Marker3DElement.collisionBehavior를 참조하세요.
drawsWhenOccluded optional
유형:  boolean optional
Marker3DElement.drawsWhenOccluded를 참조하세요.
extruded optional
유형:  boolean optional
Marker3DElement.extruded를 참조하세요.
label optional
유형:  string optional
Marker3DElement.label를 참조하세요.
position optional
Marker3DElement.position를 참조하세요.
sizePreserved optional
유형:  boolean optional
Marker3DElement.sizePreserved를 참조하세요.
zIndex optional
유형:  number optional
Marker3DElement.zIndex를 참조하세요.

Marker3DInteractiveElement 클래스

google.maps.maps3d.Marker3DInteractiveElement 클래스

3D 지도에 위치를 표시합니다. Marker3DInteractiveElement이 표시되려면 position이 설정되어야 합니다. Marker3DElement와 달리 Marker3DInteractiveElement는 gmp-click 이벤트를 수신합니다.

맞춤 요소:
<gmp-marker-3d-interactive gmp-popover-target="popover-id" title="string"></gmp-marker-3d-interactive>

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

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

const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
매개변수: 
지정된 옵션으로 Marker3DInteractiveElement를 만듭니다.
gmpPopoverTargetElement
유형:  PopoverElement optional
설정하면 이 마커를 클릭할 때 팝오버 요소가 열립니다.
HTML 속성:
  • <gmp-marker-3d-interactive gmp-popover-target="popover-id"></gmp-marker-3d-interactive>
title
유형:  string
텍스트를 롤오버합니다. 제공된 경우 접근성 텍스트 (예: 스크린 리더와 함께 사용)가 제공된 값과 함께 Marker3DInteractiveElement에 추가됩니다.
HTML 속성:
  • <gmp-marker-3d-interactive title="string"></gmp-marker-3d-interactive>
상속: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex
default
Marker3DInteractiveElement에 직접 추가된 맞춤 요소는 슬롯에 배치되지만 PinElement 유형의 요소만 마커를 그리는 데 사용되고 다른 요소는 무시됩니다.
addEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신할 이벤트 유형을 나타내는 대소문자를 구분하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener 참고
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 타겟에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션 참고
반환 값:  void
이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener 참고
gmp-click
function(clickEvent)
인수: 
이 이벤트는 Marker3DInteractiveElement 요소를 클릭하면 발생합니다.

Marker3DInteractiveElementOptions 인터페이스

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

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

이 인터페이스는 Marker3DElementOptions를 확장합니다.

gmpPopoverTargetElement optional
유형:  PopoverElement optional
Marker3DInteractiveElement.gmpPopoverTargetElement를 참조하세요.
title optional
유형:  string optional
Marker3DInteractiveElement.title를 참조하세요.
상속: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Model3DElement 클래스

google.maps.maps3d.Model3DElement 클래스

glTF 모델의 렌더링을 허용하는 3D 모델 Model3DElement이 표시되려면 position 및 src를 설정해야 합니다.

gLTF PBR의 핵심 속성을 지원해야 합니다. 현재 확장 프로그램 또는 확장 프로그램 속성은 지원되지 않습니다.

맞춤 요소:
<gmp-model-3d altitude-mode="absolute" orientation="heading,tilt,roll" position="lat,lng" scale="number" src="url"></gmp-model-3d>

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

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

const {Model3DElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
Model3DElement
Model3DElement([options])
매개변수: 
지정된 옵션으로 Model3DElement를 만듭니다.
altitudeMode
유형:  AltitudeMode optional
기본값: AltitudeMode.CLAMP_TO_GROUND
위치의 고도가 해석되는 방식을 지정합니다.
HTML 속성:
  • <gmp-model-3d altitude-mode="absolute"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="clamp-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-mesh"></gmp-model-3d>
orientation
3D 지도에 모델을 배치하기 위해 3D 모델의 좌표계를 회전하는 방법을 설명합니다.

회전은 롤, 틸트, 헤딩 순으로 모델에 적용됩니다.
HTML 속성:
  • <gmp-model-3d orientation="heading,tilt,roll"></gmp-model-3d>
position
Model3DElement의 위치를 설정합니다. 고도는 특정 모드에서 무시되므로 선택사항입니다.
HTML 속성:
  • <gmp-model-3d position="lat,lng"></gmp-model-3d>
  • <gmp-model-3d position="lat,lng,altitude"></gmp-model-3d>
scale
유형:  number|Vector3D|Vector3DLiteral optional
기본값: 1
모델의 좌표 공간에서 x, y, z 축을 따라 모델을 조정합니다.
HTML 속성:
  • <gmp-model-3d scale="number"></gmp-model-3d>
  • <gmp-model-3d scale="x,y,z"></gmp-model-3d>
src
유형:  string|URL optional
3D 모델의 URL을 지정합니다. 현재는 .glb 형식의 모델만 지원됩니다.

모든 상대 HTTP URL은 해당 절대 URL로 변환됩니다.

.glb 모델 파일을 기본 애플리케이션과 다른 웹사이트나 서버에서 호스팅하는 경우 올바른 CORS HTTP 헤더를 설정해야 합니다. 이렇게 하면 애플리케이션이 다른 도메인의 모델 파일에 안전하게 액세스할 수 있습니다.
HTML 속성:
  • <gmp-model-3d src="url"></gmp-model-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신할 이벤트 유형을 나타내는 대소문자를 구분하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요.
BetaremoveEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 타겟에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener을 참고하세요.

Model3DElementOptions 인터페이스

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

Model3DElement에 설정할 수 있는 속성을 정의하는 데 사용되는 Model3DElementOptions 객체입니다.
altitudeMode optional
유형:  AltitudeMode optional
Model3DElement.altitudeMode를 참조하세요.
orientation optional
Model3DElement.orientation를 참조하세요.
position optional
Model3DElement.position를 참조하세요.
scale optional
유형:  number|Vector3D|Vector3DLiteral optional
Model3DElement.scale를 참조하세요.
src optional
유형:  string|URL optional
Model3DElement.src를 참조하세요.

Model3DInteractiveElement 클래스

google.maps.maps3d.Model3DInteractiveElement 클래스

glTF 모델의 렌더링을 허용하는 3D 모델 Model3DElement이 표시되려면 position 및 src를 설정해야 합니다.

gLTF PBR의 핵심 속성을 지원해야 합니다. 현재 확장 프로그램 또는 확장 프로그램 속성은 지원되지 않습니다.

Model3DElement와 달리 Model3DInteractiveElement는 gmp-click 이벤트를 수신합니다.

맞춤 요소:
<gmp-model-3d-interactive></gmp-model-3d-interactive>

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

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

const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
Model3DInteractiveElement
Model3DInteractiveElement([options])
매개변수: 
지정된 옵션으로 Model3DInteractiveElement를 만듭니다.
상속됨: altitudeMode, orientation, position, scale, src
addEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신할 이벤트 유형을 나타내는 대소문자를 구분하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener 참고
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 타겟에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션 참고
반환 값:  void
이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener 참고
gmp-click
function(clickEvent)
인수: 
이 이벤트는 Model3DInteractiveElement 요소를 클릭하면 발생합니다.

Model3DInteractiveElementOptions 인터페이스

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

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

이 인터페이스는 Model3DElementOptions를 확장합니다.

상속됨: altitudeMode, orientation, position, scale, src

Polyline3DElement 클래스

google.maps.maps3d.Polyline3DElement 클래스

3D 다중선은 3D 지도에서 연결된 선분의 선형 오버레이입니다.

맞춤 요소:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>

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

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

const {Polyline3DElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
Polyline3DElement
Polyline3DElement([options])
매개변수: 
지정된 옵션으로 Polyline3DElement를 만듭니다.
altitudeMode
유형:  AltitudeMode optional
기본값: AltitudeMode.CLAMP_TO_GROUND
좌표의 고도 구성요소가 해석되는 방식을 지정합니다.
HTML 속성:
  • <gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>
coordinates
순서대로 된 폴리라인의 좌표입니다. 고도는 특정 모드에서 무시되므로 선택사항입니다.
drawsOccludedSegments
유형:  boolean optional
기본값: false
가려질 수 있는 폴리라인 부분이 그려지는지 여부를 지정합니다. 다중선은 지도 지오메트리 (예: 건물)에 의해 가려질 수 있습니다.
HTML 속성:
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
유형:  boolean optional
기본값: false
폴리선을 지면에 연결할지 여부를 지정합니다. 폴리라인을 돌출시키려면 altitudeMode가 RELATIVE_TO_GROUND 또는 ABSOLUTE이어야 합니다.
HTML 속성:
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
유형:  boolean optional
기본값: false
true인 경우 다중선의 가장자리가 측지로 해석되어 지구의 곡선을 따릅니다. false인 경우 폴리라인의 가장자리가 화면 공간에서 직선으로 렌더링됩니다.
HTML 속성:
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
유형:  string optional
바깥쪽 색상입니다. 모든 CSS3 색상이 지원됩니다.
HTML 속성:
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerWidth
유형:  number optional
외부 너비는 0.0~1.0 사이입니다. strokeWidth의 비율입니다.
HTML 속성:
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
strokeColor
유형:  string optional
획 색상입니다. 모든 CSS3 색상이 지원됩니다.
HTML 속성:
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeWidth
유형:  number optional
픽셀 단위의 스트로크 너비입니다.
HTML 속성:
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
유형:  number optional
다른 폴리라인/폴리곤과 비교한 zIndex입니다.
HTML 속성:
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신할 이벤트 유형을 나타내는 대소문자를 구분하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요.
BetaremoveEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 타겟에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener을 참고하세요.

Polyline3DElementOptions 인터페이스

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

Polyline3DElement에서 설정할 수 있는 속성을 정의하는 데 사용되는 Polyline3DElementOptions 객체입니다.
altitudeMode optional
유형:  AltitudeMode optional
Polyline3DElement.altitudeMode를 참조하세요.
coordinates optional
Polyline3DElement.coordinates를 참조하세요.
drawsOccludedSegments optional
유형:  boolean optional
Polyline3DElement.drawsOccludedSegments를 참조하세요.
extruded optional
유형:  boolean optional
Polyline3DElement.extruded를 참조하세요.
geodesic optional
유형:  boolean optional
Polyline3DElement.geodesic를 참조하세요.
outerColor optional
유형:  string optional
Polyline3DElement.outerColor를 참조하세요.
outerWidth optional
유형:  number optional
Polyline3DElement.outerWidth를 참조하세요.
strokeColor optional
유형:  string optional
Polyline3DElement.strokeColor를 참조하세요.
strokeWidth optional
유형:  number optional
Polyline3DElement.strokeWidth를 참조하세요.
zIndex optional
유형:  number optional
Polyline3DElement.zIndex를 참조하세요.

Polyline3DInteractiveElement 클래스

google.maps.maps3d.Polyline3DInteractiveElement 클래스

3D 다중선은 3D 지도에서 연결된 선분의 선형 오버레이입니다. Polyline3DElement와 달리 Polyline3DInteractiveElement는 gmp-click 이벤트를 수신합니다.

맞춤 요소:
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>

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

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

const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
매개변수: 
지정된 옵션으로 Polyline3DInteractiveElement를 만듭니다.
상속: altitudeMode, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, strokeColor, strokeWidth, zIndex
addEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신할 이벤트 유형을 나타내는 대소문자를 구분하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener 참고
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 타겟에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션 참고
반환 값:  void
이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener 참고
gmp-click
function(clickEvent)
인수: 
  • clickEvent:  LocationClickEvent 이벤트 객체에는 클릭의 위도-경도-고도 위치가 포함됩니다.
이 이벤트는 Polyline3DInteractiveElement 요소를 클릭하면 발생합니다.

Polyline3DInteractiveElementOptions 인터페이스

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

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

이 인터페이스는 Polyline3DElementOptions를 확장합니다.

상속: altitudeMode, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, strokeColor, strokeWidth, zIndex

Polygon3DElement 클래스

google.maps.maps3d.Polygon3DElement 클래스

3D 다각형 (3D 다중선과 유사)은 순서가 지정된 일련의 연결된 좌표를 정의합니다. 또한 다각형은 닫힌 루프를 형성하고 채워진 영역을 정의합니다.

맞춤 요소:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>

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

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

const {Polygon3DElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
Polygon3DElement
Polygon3DElement([options])
매개변수: 
지정된 옵션으로 Polygon3DElement를 만듭니다.
altitudeMode
유형:  AltitudeMode optional
기본값: AltitudeMode.CLAMP_TO_GROUND
좌표의 고도 구성요소가 해석되는 방식을 지정합니다.
HTML 속성:
  • <gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>
drawsOccludedSegments
유형:  boolean optional
기본값: false
가려질 수 있는 다각형 부분이 그려지는지 여부를 지정합니다. 다각형은 지도 지오메트리 (예: 건물)에 의해 가려질 수 있습니다.
HTML 속성:
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
유형:  boolean optional
기본값: false
다각형을 지면에 연결할지 여부를 지정합니다. 다각형을 돌출시키려면 altitudeMode가 RELATIVE_TO_GROUND 또는 ABSOLUTE여야 합니다.
HTML 속성:
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
유형:  string optional
채우기 색상입니다. 모든 CSS3 색상이 지원됩니다.
HTML 속성:
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
geodesic
유형:  boolean optional
기본값: false
true인 경우 다각형의 가장자리가 측지선으로 해석되어 지구의 곡률을 따릅니다. false인 경우 다각형의 가장자리가 화면 공간에서 직선으로 렌더링됩니다.
HTML 속성:
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerCoordinates
닫힌 루프를 지정하는, 순서대로 된 좌표입니다. 다중선과 달리 다각형은 하나 이상의 경로로 구성될 수 있으며, 이 경우 다각형 내부에 여러 개의 컷아웃이 생성됩니다.
outerCoordinates
닫힌 루프를 지정하는, 순서대로 된 좌표입니다. 고도는 특정 모드에서 무시되므로 선택사항입니다.
strokeColor
유형:  string optional
획 색상입니다. 모든 CSS3 색상이 지원됩니다.
HTML 속성:
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeWidth
유형:  number optional
픽셀 단위의 스트로크 너비입니다.
HTML 속성:
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
유형:  number optional
다른 폴리라인/폴리곤과 비교한 zIndex입니다.
HTML 속성:
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신할 이벤트 유형을 나타내는 대소문자를 구분하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요.
BetaremoveEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 타겟에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener을 참고하세요.

Polygon3DElementOptions 인터페이스

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

Polygon3DElement에서 설정할 수 있는 속성을 정의하는 데 사용되는 Polygon3DElementOptions 객체입니다.
altitudeMode optional
유형:  AltitudeMode optional
Polygon3DElement.altitudeMode를 참조하세요.
drawsOccludedSegments optional
유형:  boolean optional
Polygon3DElement.drawsOccludedSegments를 참조하세요.
extruded optional
유형:  boolean optional
Polygon3DElement.extruded를 참조하세요.
fillColor optional
유형:  string optional
Polygon3DElement.fillColor를 참조하세요.
geodesic optional
유형:  boolean optional
Polygon3DElement.geodesic를 참조하세요.
innerCoordinates optional
Polygon3DElement.innerCoordinates를 참조하세요.
outerCoordinates optional
Polygon3DElement.outerCoordinates를 참조하세요.
strokeColor optional
유형:  string optional
Polygon3DElement.strokeColor를 참조하세요.
strokeWidth optional
유형:  number optional
Polygon3DElement.strokeWidth를 참조하세요.
zIndex optional
유형:  number optional
Polygon3DElement.zIndex를 참조하세요.

Polygon3DInteractiveElement 클래스

google.maps.maps3d.Polygon3DInteractiveElement 클래스

3D 다각형 (3D 다중선과 유사)은 순서가 지정된 일련의 연결된 좌표를 정의합니다. 또한 다각형은 닫힌 루프를 형성하고 채워진 영역을 정의합니다. Polygon3DElement와 달리 Polygon3DInteractiveElement는 gmp-click 이벤트를 수신합니다.

맞춤 요소:
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>

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

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

const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
매개변수: 
지정된 옵션으로 Polygon3DInteractiveElement를 만듭니다.
상속: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerCoordinates, outerCoordinates, strokeColor, strokeWidth, zIndex
addEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신할 이벤트 유형을 나타내는 대소문자를 구분하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener 참고
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 타겟에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션 참고
반환 값:  void
이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener 참고
gmp-click
function(clickEvent)
인수: 
  • clickEvent:  LocationClickEvent 이벤트 객체에는 클릭의 위도-경도-고도 위치가 포함됩니다.
이 이벤트는 Polygon3DInteractiveElement 요소를 클릭하면 발생합니다.

Polygon3DInteractiveElementOptions 인터페이스

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

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

이 인터페이스는 Polygon3DElementOptions를 확장합니다.

상속: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerCoordinates, outerCoordinates, strokeColor, strokeWidth, zIndex

PopoverElement 클래스

google.maps.maps3d.PopoverElement 클래스

팝오버를 렌더링하는 맞춤 HTML 요소입니다. 풍선처럼 보이며 마커에 연결되는 경우가 많습니다.

맞춤 요소:
<gmp-popover altitude-mode="absolute" light-dismiss-disabled open position-anchor="lat,lng"></gmp-popover>

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

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

const {PopoverElement} = await google.maps.importLibrary("maps3d")를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
PopoverElement
PopoverElement([options])
매개변수: 
altitudeMode
유형:  AltitudeMode optional
기본값: AltitudeMode.CLAMP_TO_GROUND
위치의 고도 구성요소가 해석되는 방식을 지정합니다.
HTML 속성:
  • <gmp-popover altitude-mode="absolute"></gmp-popover>
  • <gmp-popover altitude-mode="clamp-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-mesh"></gmp-popover>
lightDismissDisabled
유형:  boolean optional
기본값: false
이 팝오버를 '가볍게 닫기'해야 하는지 여부를 지정합니다. '가벼운 닫기' 동작은 브라우저 팝오버 API의 일부인 popover="auto" 속성을 설정하는 것과 유사합니다.
HTML 속성:
  • <gmp-popover light-dismiss-disabled></gmp-popover>
open
유형:  boolean optional
기본값: false
이 팝오버가 열려야 하는지 여부를 지정합니다.
HTML 속성:
  • <gmp-popover open></gmp-popover>
positionAnchor
이 팝오버를 표시할 위치입니다. 팝오버가 대화형 마커에 고정된 경우 마커의 위치가 대신 사용됩니다.
HTML 속성:
  • <gmp-popover position-anchor="lat,lng"></gmp-popover>
  • <gmp-popover position-anchor="lat,lng,altitude"></gmp-popover>
  • <gmp-popover position-anchor="marker-id"></gmp-popover>
default
슬롯 콘텐츠를 팝오버의 기본 섹션에 배치합니다.
header
슬롯 콘텐츠를 팝오버의 제목 섹션에 배치합니다.
--gmp-popover-max-width
콘텐츠의 너비와 관계없이 팝오버의 최대 너비입니다.
--gmp-popover-min-width
콘텐츠의 너비와 관계없이 팝오버의 최소 너비입니다. 이 속성을 사용할 때는 지도 너비 (픽셀)보다 작은 값으로 설정하는 것이 좋습니다.
--gmp-popover-pixel-offset-x
팝오버가 고정된 지도의 지리 좌표에서 팝오버의 팁까지의 x축 오프셋(픽셀 단위)입니다.
--gmp-popover-pixel-offset-y
팝오버가 고정된 지도의 지리 좌표에서 팝오버의 팁까지의 y축 오프셋(픽셀)입니다.
color-scheme
이 팝오버가 렌더링될 수 있는 색 구성표를 나타냅니다. 자세한 내용은 color-scheme 문서를 참고하세요. 지정하지 않으면 기본적으로 사용자의 색상 구성표 환경설정이 사용됩니다.
BetaaddEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신할 이벤트 유형을 나타내는 대소문자를 구분하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요.
BetaremoveEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 타겟에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener을 참고하세요.

PopoverElementOptions 인터페이스

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

PopoverElement에 설정할 수 있는 속성을 정의하는 데 사용되는 PopoverElementOptions 객체입니다.
altitudeMode optional
유형:  AltitudeMode optional
PopoverElement.altitudeMode를 참조하세요.
lightDismissDisabled optional
유형:  boolean optional
PopoverElement.lightDismissDisabled를 참조하세요.
open optional
유형:  boolean optional
PopoverElement.open를 참조하세요.
positionAnchor optional
PopoverElement.positionAnchor를 참조하세요.

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 지면+건물+수면 중 가장 높은 위치를 기준으로 객체를 표현할 수 있습니다. 물 위에서는 수면이 되고, 지형 위에서는 건물 표면 (있는 경우) 또는 지면 (건물이 없는 경우)이 됩니다.