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 de l'API Maps JavaScript contiennent des éléments d'interface utilisateur, appelés commandes d'exploration, pour permettre aux utilisateurs d'interagir avec la carte. Les commandes d'exploration sont affichées par défaut dans l'UI de la carte, mais peuvent être désactivées pour plus de simplicité ou pour laisser de la place aux commandes personnalisées. Notez que les raccourcis clavier pour explorer la carte sont disponibles lorsque les commandes de l'interface utilisateur sont désactivées.

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

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 de carte avec des commandes

Voici la liste complète des commandes dans 3D Maps 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 le cap de la caméra.
  • La commande d'inclinaison vous permet de modifier l'inclinaison de la caméra.
  • La commande de la boussole indique la direction du nord de la boussole et permet de réinitialiser la caméra sur une orientation 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