本頁面提供 Maps JavaScript 擬真 3D 地圖的關鍵功能資訊,協助您打造互動式和沉浸式 3D 體驗。以下說明文件涵蓋以下內容:
- 處理使用者介面事件,以便順暢互動。
- 包括用於瀏覽 3D 空間的探索控制項。
- 使用預設的相機路徑進行導覽。
- 套用相機限制,以便在特定區域保持對焦。
使用者介面事件
本節將概述您在使用 3D 地圖時,可透過程式輔助方式監聽及處理的互動事件和狀態變更通知。瀏覽器中的 JavaScript 是由事件驅動,這表示它會產生事件來回應使用者互動,讓程式可以監聽並相應執行程式碼。
事件主要分為兩種類型:
- 使用者互動事件 (例如滑鼠點擊) 會從 3D 地圖檢視區傳播至您的程式碼。這些事件可讓您回應 3D 地圖環境中的直接使用者動作。查看範例。
- 狀態變更通知會使用傳統
property_changed
命名慣例,反映基礎 3D 地圖資料模型和算繪狀態的更新。
每個 3D 對應 API 物件都會公開一組具名事件,您的程式可為這些事件註冊事件監聽器,並在這些事件發生時使用內建 addEventListener()
函式執行邏輯。以下範例說明使用者與 3D 地圖互動時觸發的常見事件。
以下範例顯示使用者與地圖互動時觸發的事件:
探索控制項
Maps JavaScript API 的擬真 3D 地圖中顯示的地圖包含 UI 元素,可支援使用者與地圖互動。這些元素稱為「使用者控制項」。根據預設,系統會納入探索控制項,但您可以選擇在應用程式中停用這些控制項。
下圖顯示 Maps JavaScript 擬真 3D 地圖顯示的預設控制項:
以下列出 Maps JavaScript 擬真 3D 地圖中的完整控制項組合:
- 「縮放控制項」會顯示「+」和「-」按鈕,用於變更地圖的縮放等級。
- 傾斜控制項可讓你變更攝影機的傾斜角度。
- 旋轉控制項可讓您變更攝影機的方向。
- 「移動控制項」會顯示「←」、「→」、「↑」和「↓」按鈕,用於變更地圖的中心點。
相機控制項和動畫
預設攝影機路徑
Maps JavaScript 的擬真 3D 地圖提供兩個預設相機路徑。您可以透過變更動畫時間長度 (藉此增加或降低速度),或將動畫組合起來,打造更具電影感的體驗,來自訂攝影機路徑。
Maps JavaScript 中的擬真 3D 地圖支援下列攝影機路徑:
FlyCameraTo
動畫會從地圖中心飛往指定目的地。FlyCameraAround
動畫會圍繞地圖上的某個點旋轉,旋轉次數由您指定。
這兩個可用的路徑可以結合,飛往興趣點、繞著它旋轉,然後在所需位置停下。
攝影機限制
建議您控制攝影機的平移、最大高度,或是建立經緯度範圍,限制使用者在特定地圖中的移動範圍。您可以使用相機限制功能執行這項操作。
如要瞭解攝影機限制的運作方式和實作方式,請參閱示範。