3D 地図の操作と探索

プラットフォームを選択: Android iOS JavaScript

コントロールの概要

Maps JavaScript API の 3D 地図によって表示される地図には、ユーザーが地図を操作できるようにする UI 要素（探索コントロール）が含まれています。探索コントロールはデフォルトで地図の UI に表示されますが、簡素化のため、またはカスタム コントロールのスペースを確保するために無効にできます。地図の探索用のキーボード ショートカットは、UI コントロールが無効になっている場合に使用できます。

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,
  defaultUIHidden: 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>

次のステップ