控制相机的位置

在 Maps JavaScript API 的 3D 地图中，您可以使用 cameraPosition 选项管理相机的焦点。

关键行为：

  • 使用 center：纬度和经度坐标用于指定相机所对准的地图上的确切点。
  • 使用 cameraPosition：相机本身放置在构建期间提供的坐标处。这通常会导致难以将视图居中放置在特定地图注点上。

以下示例演示了如何使用 center 选项初始化地图，以确保特定的焦点。标记表示 center 中提供的中心点：

CSS

gmp-map-3d {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=beta&libraries=maps3d"></script>
    </body>
</html>
index.html

试用示例

视野范围和距离

您可以使用两个不同的参数（range 和 fov）调整视口中显示的地图范围。虽然两者都会影响“缩放”级别，但它们的功能各不相同：

  • range：控制相机与中心点之间的实际距离。调整此值相当于将相机移近或移远地图。

  • fov（视野范围）：控制相机镜头的角度。值越大，效果越像广角镜头，可显示更多外围内容；值越小，效果越像长焦镜头。

以下比较显示了同一地图在 fov 频谱两端的显示效果。在左侧地图中，视野 (fov) 设置为 5（窄/长焦）；在右侧地图中，视野设置为 80（广角）。

两张金门大桥 3D 航拍渲染图的对照比较。左侧显示的是整个桥面和马林岬的广阔鸟瞰图。右侧显示的是红色悬索塔和桥面的极近特写，拍摄角度为陡峭的俯角。