3D Maps

Map3DElement 類別

class google.maps.maps3d.Map3DElement extends HTMLElement implements Map3DElementOptions
library "maps3d"

Map3DElement 是 3D 地圖檢視畫面的 HTML 介面。請注意，您必須設定 mode，3D 地圖才會開始算繪。

<gmp-map-3d
  autofits-camera-animation="value-name"
  camera-position="lat,lng,altitude"
  center="lat,lng,altitude"
  color-scheme="value-name"
  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-memory-megabytes="number"
  max-tilt="number"
  min-altitude="number"
  min-heading="number"
  min-tilt="number"
  mode="value-name"
  quality-mode="value-name"
  range="number"
  roll="number"
  tilt="number">
</gmp-map-3d>

const {Map3DElement} = await google.maps.importLibrary("maps3d");

屬性
autofitsCameraAnimation 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: 63710000}。63710000 公尺是允許的高度上限 (地球半徑乘以 10)。 HTML 屬性： center="lat,lng,altitude"
colorScheme attr: color-scheme	輸入類型： ColorScheme optional 輸出類型： ColorScheme optional 預設值： ColorScheme.FOLLOW_SYSTEM 指定地圖的色彩配置。如果沒有設定，預設值為 ColorScheme.FOLLOW_SYSTEM。 HTML 屬性： color-scheme="value-name"
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 預設值： GestureHandling.GREEDY 控制協作手勢處理。如果設為 COOPERATIVE，則必須使用輔助鍵或雙指手勢，才能捲動地圖。如果設為 GREEDY，地圖元素上的使用者事件就無法捲動主機網頁。如果設為 AUTO，手勢處理方式會由主機頁面的捲動功能決定。 HTML 屬性： gesture-handling="value-name"
heading attr: heading	輸入類型： number optional 輸出類型： number optional 地圖的指南針方向 (以度為單位)，正北為零。如果沒有傾斜，任何滾動都會解讀為航向。 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 至 63710000 公尺之間 (地球半徑乘以 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"
maxMemoryMegabytes attr: max-memory-megabytes	輸入類型： number optional 輸出類型： number optional 地圖可用於算繪的記憶體量上限 (以 MB 為單位)。值越低，記憶體用量越少，但視覺細節也會減少；值越高，記憶體中保留的細節越多。有效值範圍介於 64 到 2048 之間。如未設定，系統會根據裝置和地圖大小自動選擇限制。必須在地圖初始化前設定，之後所做的變更會遭到忽略。 HTML 屬性： max-memory-megabytes="number"
maxTilt attr: max-tilt	輸入類型： number optional 輸出類型： number optional 地圖的最大入射角。有效值介於 0 到 90 度之間。 HTML 屬性： max-tilt="number"
minAltitude attr: min-altitude	輸入類型： number optional 輸出類型： number optional 地圖上顯示的最低離地高度。有效值介於 0 至 63710000 公尺之間 (地球半徑乘以 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"
qualityMode attr: quality-mode	輸入類型： QualityMode optional 輸出類型： QualityMode optional 預設值： QualityMode.FIDELITY 指定地圖的算繪品質。設為 QualityMode.PERFORMANCE 即可減少視覺細節，降低記憶體用量。 HTML 屬性： quality-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 攝影機檢視向量的傾斜角度，如果檢視向量直接向下看地球，傾斜角度會是零度。如果檢視向量指向地球以外的方向，傾斜角度會是 180 度。 HTML 屬性： tilt="number"
defaultUIDisabled attr: default-ui-disabled	類型： boolean optional 預設值： false 如果設為 true，所有預設 UI 按鈕都會停用。不會停用鍵盤和手勢控制功能。 HTML 屬性： default-ui-disabled

Map3DElementOptions 介面

介面 google.maps.maps3d.Map3DElementOptions
由 Map3DElement 實作

Map3DElementOptions 物件，用於定義可在 Map3DElement 上設定的屬性。

屬性
autofitsCameraAnimation 選填	類型： AutofitsCameraAnimation optional 詳情請參閱《Map3DElement.autofitsCameraAnimation》。
bounds 選填	類型： LatLngBounds|LatLngBoundsLiteral optional 詳情請參閱《Map3DElement.bounds》。
cameraPosition 選填	類型： LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional 詳情請參閱《Map3DElement.cameraPosition》。
center 選填	類型： LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional 詳情請參閱《Map3DElement.center》。
colorScheme 選填	類型： ColorScheme optional 詳情請參閱《Map3DElement.colorScheme》。
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 詳情請參閱《Map3DElement.internalUsageAttributionIds》。
language 選填	類型： string optional 詳情請參閱《Map3DElement.language》。
mapId 選填	類型： string optional 詳情請參閱《Map3DElement.mapId》。
maxAltitude 選填	類型： number optional 詳情請參閱《Map3DElement.maxAltitude》。
maxHeading 選填	類型： number optional 詳情請參閱《Map3DElement.maxHeading》。
maxMemoryMegabytes 選填	類型： number optional 詳情請參閱《Map3DElement.maxMemoryMegabytes》。
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》。
qualityMode 選填	類型： QualityMode optional 詳情請參閱《Map3DElement.qualityMode》。
range 選填	類型： number optional 詳情請參閱《Map3DElement.range》。
region 選填	類型： string optional 詳情請參閱《Map3DElement.region》。
roll 選填	類型： number optional 詳情請參閱《Map3DElement.roll》。
tilt 選填	類型： number optional 詳情請參閱《Map3DElement.tilt》。

MapMode 常數

constants google.maps.maps3d.MapMode
library "maps3d"

指定地圖的算繪模式。

這些常數也可以做為字串使用。在 TypeScript 中，字串常值是由 MapModeString 類型定義。

const {MapMode} = await google.maps.importLibrary("maps3d");

常數
HYBRID	這個地圖模式會在衛星或相片寫實圖像上，顯示主要街道的透明圖層。
ROADMAP	這個地圖模式會顯示一般街道地圖。
SATELLITE	這個地圖模式會顯示衛星或擬真圖像 (如有)。

QualityMode 常數

constants google.maps.maps3d.QualityMode
library "maps3d"

指定 3D 地圖的算繪品質。

這些常數也可以做為字串使用。在 TypeScript 中，字串常值是由 QualityModeString 類型定義。

const {QualityMode} = await google.maps.importLibrary("maps3d");

GestureHandling 常數

constants google.maps.maps3d.GestureHandling
library "maps3d"

指定地圖元素應如何處理手勢事件。

這些常數也可以做為字串使用。在 TypeScript 中，字串常值是由 GestureHandlingString 類型定義。

const {GestureHandling} = await google.maps.importLibrary("maps3d");

AutofitsCameraAnimation 常數

constants google.maps.maps3d.AutofitsCameraAnimation
library "maps3d"

指定攝影機移至新位置時的行為，以便根據選擇加入的子項元素置中。

這些常數也可以做為字串使用。在 TypeScript 中，字串常值是由 AutofitsCameraAnimationString 類型定義。

const {AutofitsCameraAnimation} = await google.maps.importLibrary("maps3d");

FlyAroundAnimationOptions 介面

介面 google.maps.maps3d.FlyAroundAnimationOptions

FlyCameraAround 動畫的自訂選項。

FlyToAnimationOptions 介面

介面 google.maps.maps3d.FlyToAnimationOptions

FlyCameraTo 動畫的自訂選項。

CameraOptions 介面

介面 google.maps.maps3d.CameraOptions

CameraOptions 物件，用於定義可在相機物件上設定的屬性。攝影機物件可以是任何具有攝影機位置的物件，例如目前的地圖狀態，或未來要求的動畫狀態。

SteadyChangeEvent 類別

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

這個事件是透過監控 Map3DElement 的穩定狀態建立。這個事件會透過 DOM 樹狀結構向上傳播。

const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d");

LocationClickEvent 類別

類別 google.maps.maps3d.LocationClickEvent 擴充 Event
由 PlaceClickEvent 擴充
程式庫 "maps3d"

點按 Map3DElement 時，會建立這個事件。

const {LocationClickEvent} = await google.maps.importLibrary("maps3d");

LocationPointerEvent 類別

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

當使用者在互動式 Map3DElement 上進行指標互動時，系統會建立這個事件。

const {LocationPointerEvent} = await google.maps.importLibrary("maps3d");

PlaceClickEvent 類別

class google.maps.maps3d.PlaceClickEvent extends LocationClickEvent, Event
library "maps3d"

使用者在Map3DElement上點選地點圖示時，就會觸發這項事件。如要避免顯示預設彈出式視窗，請對這個事件呼叫 preventDefault() 方法，防止 Map3DElement 處理該事件。

const {PlaceClickEvent} = await google.maps.importLibrary("maps3d");