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,
  defaultUIDisabled: 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>

預設攝影機路徑

Maps JavaScript 中的擬真 3D 地圖提供兩種預設攝影機路徑。您可以變更動畫的持續時間 (藉此加快或減慢速度)，或是結合多個路徑，打造更具電影感的體驗，自訂攝影機路徑。

Maps JavaScript 中的擬真 3D 地圖支援下列攝影機路徑：

  • flyCameraTo 動畫會從地圖中心飛往指定目的地。
  • flyCameraAround 動畫會繞著地圖上的某個點旋轉，並重複指定次數。

您可以結合這兩種路徑，先飛往興趣點，再繞著該點旋轉，然後在指定位置停止。

目的地

下列程式碼範例示範如何將攝影機動畫設為飛往某個位置：

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

飛越

以下程式碼範例說明如何將攝影機動畫設為在某個位置附近飛越：

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    rounds: 1
  });
}

合併動畫

以下程式碼範例說明如何合併動畫，將攝影機飛往某個位置，然後在第一個動畫結束時繞著該位置旋轉：

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

後續步驟