Commandes et exploration de la carte 3D

Sélectionnez une plate-forme : Android iOS JavaScript

Présentation des commandes

Les cartes affichées via les cartes 3D dans l'API Maps JavaScript contiennent des éléments d'interface utilisateur, appelés commandes d'exploration, qui permettent à l'utilisateur d'interagir avec la carte. Les commandes d'exploration sont affichées par défaut dans l'interface utilisateur de la carte, mais elles peuvent être désactivées pour simplifier l'interface ou laisser de la place aux commandes personnalisées. Notez que les raccourcis clavier pour l'exploration de la carte sont disponibles lorsque les commandes d'interface utilisateur sont désactivées.

Les cartes 3D de l'API Maps JavaScript permettent également de guider vos utilisateurs sur la carte à l'aide de trajets de caméra prédéfinis. Ces chemins d'accès peuvent être personnalisés et combinés pour créer des expériences 3D enrichies.

Commandes d'exploration

L'image suivante montre l'ensemble de commandes par défaut affichées par les cartes 3D dans l'API Maps JavaScript :

Image d'une carte avec des commandes

Voici la liste de l'ensemble complet des commandes des cartes 3D dans Maps JavaScript :

  • La commande de zoom affiche les boutons "+" et "-" pour modifier le niveau de zoom de la carte.
  • La commande de déplacement affiche les boutons "←", "→", "↑" et "↓" pour modifier le centre de la carte.
  • Les commandes de rotation vous permettent de modifier l'orientation de la caméra.
  • La commande d'inclinaison vous permet de modifier l'inclinaison de la caméra.
  • La commande de boussole indique la direction du nord et permet de réinitialiser la caméra vers le nord.

L'exemple de code suivant montre comment activer/désactiver les commandes d'exploration :

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>

Étapes suivantes