3D 地图控件和探索

请选择平台： Android iOS JavaScript

控件概览

通过 Maps JavaScript API 中的仿真 3D 地图显示的地图包含界面元素，可支持用户与地图互动。这些元素称为“控件”，您可以选择是否将其纳入界面中。如果您禁止显示界面控件，用户仍可使用键盘快捷键在地图上四处移动。

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});
}

后续步骤