3D 地圖控制項和探索

選取平台： Android iOS JavaScript

控制項總覽

透過 Maps JavaScript API 的 3D 地圖顯示的地圖包含 UI 元素 (稱為「探索控制項」)，可支援使用者與地圖互動。地圖 UI 預設會顯示探索控制項，但您可以停用這些控制項，讓地圖更簡潔，或為自訂控制項預留空間。請注意，停用 UI 控制項後，您可以使用鍵盤快速鍵探索地圖。

Maps JavaScript API 的 3D 地圖也支援使用預設攝影機路徑，引導使用者瀏覽地圖。您可以自訂及合併這些路徑，打造豐富的 3D 體驗。

探索控制選項

下圖為透過 Maps JavaScript API 顯示的 3D 地圖預設控制項組合：

地圖圖片，顯示控制項

以下列出了 JavaScript 版 3D 地圖中的所有控制項：

  • 「縮放控制項」會顯示「+」和「-」按鈕，用於變更地圖的縮放等級。
  • 「移動控制項」會顯示「←」、「→」、「↑」和「↓」按鈕，用於變更地圖中心。
  • 旋轉控制項可讓你變更攝影機的航向。
  • 傾斜控制項可讓您變更攝影機的傾斜角度。
  • 指南針控制項會指出正北方的方向，並允許將攝影機重設為朝北。

下列程式碼範例示範如何切換探索控制項：

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIHidden: true,
});

HTML

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

後續步驟