3D 地図の操作と探索

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

コントロールの概要

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

Maps JavaScript API の 3D Maps は、プリセットのカメラパスを使用してユーザーを地図上で案内する機能もサポートしています。これらのパスをカスタマイズして組み合わせることで、リッチな 3D エクスペリエンスを作成できます。

探索コントロール

次の画像は、Maps JavaScript API の 3D Maps で表示されるデフォルトのコントロール セットを示しています。

コントロールが表示されている地図の画像

Maps JavaScript の 3D Maps のコントロールの一覧は次のとおりです。

  • ズーム コントロールには、地図のズームレベルを変更する [+] ボタンと [-] ボタンが表示されます。
  • 移動コントロールを使用すると、「←」、「→」、「↑」、「↓」ボタンが表示され、地図の中心点を変更できるようになります。
  • 回転コントロールを使用すると、カメラの向きを変更できるようになります。
  • 傾斜コントロールを利用すると、カメラの傾斜を変更できるようになります。
  • コンパス コントロールは、コンパスの北方向を示し、カメラを北向きにリセットできるようにします。

次のコードサンプルは、探索コントロールの切り替えを示しています。

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>

次のステップ