3D 地圖控制項和探索

選取平台： Android iOS JavaScript

控制項總覽

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

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

探索控制項

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

地圖圖片，其中顯示控制項

以下列出 Maps 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>

後續步驟