為攝影機路徑加入動畫效果

選取平台： Android iOS JavaScript

您可以在 3D 地圖中加入攝影機路徑動畫，為使用者提供更身歷其境的體驗。攝影機路徑動畫可以飛往或環繞地圖上的某個點。

以下範例結合了 flyCameraTo 和 flyCameraAround 動畫：

預設攝影機路徑

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

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, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      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,
    repeatCount: 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-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}