與地圖互動

本頁面提供 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 動畫會圍繞地圖上的某個點旋轉,旋轉次數由您指定。

這兩個可用的路徑可以結合,飛往興趣點、繞著它旋轉,然後在所需位置停下。

試用範例

攝影機限制

建議您控制攝影機的平移、最大高度,或是建立經緯度範圍,限制使用者在特定地圖中的移動範圍。您可以使用相機限制功能執行這項操作。

如要瞭解攝影機限制的運作方式和實作方式,請參閱示範