与地图互动

本页介绍了 Maps JavaScript 中的仿真 3D 地图的关键功能,可让您打造互动性强且沉浸感十足的 3D 体验。以下文档涵盖以下内容:

  • 处理界面事件以实现流畅的互动。
  • 包括用于导航 3D 空间的探索控件。
  • 利用预设的摄像头路径创建导览。
  • 应用摄像头限制,以保持对特定区域的聚焦。

界面事件

本部分概要介绍了您在使用 3D 地图时可以通过程序化方式监听和处理的互动事件和状态更改通知。浏览器中的 JavaScript 是由事件驱动的,这意味着它会通过生成事件来响应用户互动,您的程序可以监听这些事件并相应地执行代码。

事件主要分为两类:

  • 用户互动事件(例如鼠标点击)会从 3D 地图视口传播到您的代码。借助这些事件,您可以响应 3D 地图环境中的直接用户操作。查看示例
  • 状态变化通知使用传统的 property_changed 命名方案,反映底层 3D 地图数据模型和渲染状态的更新。

每个 3D 地图 API 对象都会公开一组命名事件,您的程序可以为这些事件注册事件监听器,并在这些事件发生时使用内置的 addEventListener() 函数执行逻辑。以下示例展示了用户与 3D 地图互动时触发的常见事件。

以下示例展示了当用户与地图互动时会触发哪些事件:

探索控件

Maps JavaScript API 中的 Photorealistic 3D Maps 中显示的地图包含界面元素,可支持用户与地图互动。这些元素称为“用户控件”。默认情况下,系统会包含探索控件,但您可以在应用中选择隐藏这些控件

下图显示了 Maps JavaScript 中的仿真 3D 地图会显示的默认控件:

显示控件的地图图片

下面列出了 Maps JavaScript 中的仿真 3D 地图中的一整套控件:

  • 缩放控件:可显示“+”和“-”按钮,用于更改地图的缩放级别。
  • 借助倾斜度控制,您可以更改摄像头的倾斜度。
  • 借助旋转控件,您可以更改相机的方向。
  • 移动控件会显示“←”“→”“↑”和“↓”按钮,用于更改地图中心。

相机控件和动画

预设相机路径

Maps JavaScript 中的仿真 3D 地图提供了两个预设的摄像头路径。您可以通过更改动画时长(从而增加或减少速度)或组合使用动画来自定义摄像头路径,以打造更具电影质感的体验。

Maps JavaScript 中的仿真 3D 地图支持以下摄像头路径:

  • FlyCameraTo 动画从地图中心飞到指定目的地。
  • FlyCameraAround 动画会围绕您指定的任意次数旋转地图上的某个点。

您可以将这两条可用路径组合起来,以便飞到某个地图注点,围绕该地图注点旋转,然后在需要时停止。

试用示例

相机限制

您可能需要控制相机的平移、最大海拔,或者创建纬度/经度边界来限制用户在地图中的移动。您可以使用相机限制功能来实现此目的。

如需查看摄像头限制的运作方式和实现方式示例,请参阅演示