カメラの位置を制御する

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

サンプルを試す

画角と範囲

範囲と視野角という 2 つの異なるパラメータを使用して、ビューポートに表示される地図の範囲を調整できます。どちらも「ズーム」レベルに影響しますが、機能が異なります。

  • range: カメラと中心点間の物理的距離を制御します。この値を調整すると、地図に対するカメラの距離が近くなったり遠くなったりします。

  • fov（画角）: カメラのレンズの角度を制御します。値が大きいほど広角レンズのように周辺部が広く表示され、値が小さいほど望遠レンズのように表示されます。

次の比較は、fov スペクトラムの両端にある同じ地図を示しています。左側の地図では fov が 5（狭角/望遠）に設定され、右側の地図では 80（広角）に設定されています。

ゴールデン ゲート ブリッジの 2 つの 3D 空撮レンダリングを並べて比較した画像。左側には、橋の全景とマリン ヘッドランズの広角の鳥瞰図が表示されます。右側には、赤い吊り塔と橋桁を急な下向きの角度で極端にクローズアップした写真が写っています。