为相机路径添加动画效果

请选择平台： 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});
}