Commandes et exploration de la carte 3D

Sélectionnez une plate-forme : Android iOS JavaScript

Présentation des commandes

Les cartes affichées via l'API Maps JavaScript pour les cartes 3D photoréalistes contiennent des éléments d'interface utilisateur permettant aux utilisateurs d'interagir avec la carte. Ces éléments sont appelés commandes et vous pouvez choisir de les inclure ou non dans l'UI. Si vous supprimez les commandes de l'UI, l'utilisateur peut toujours parcourir la carte à l'aide de raccourcis clavier.

L'API Maps JavaScript pour les cartes 3D photoréalistes vous permet é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 photoréalistes dans l'API Maps JavaScript :

Image de carte avec des commandes

Voici la liste complète des commandes disponibles dans les cartes 3D photoréalistes de Maps JavaScript :

  • La commande de zoom affiche les boutons "+" et "-" pour modifier le niveau de zoom de la carte.
  • La commande d'inclinaison vous permet de modifier l'inclinaison de la caméra.
  • La commande de rotation vous permet de modifier le cap de la caméra.
  • La commande de déplacement affiche les boutons "←", "→", "↑" et "↓" pour modifier le centre de la carte.

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

Itinéraires de caméras prédéfinis

Les cartes 3D photoréalistes dans Maps JavaScript proposent deux chemins de caméra prédéfinis. Vous pouvez personnaliser les chemins de caméra en modifiant la durée de l'animation (ce qui augmente ou diminue la vitesse) ou en les combinant pour créer des expériences plus cinématographiques.

Les cartes 3D photoréalistes dans Maps JavaScript sont compatibles avec les chemins de caméras suivants :

  • L'animation flyCameraTo se déplace du centre de la carte vers une destination spécifiée.
  • L'animation flyCameraAround effectue le nombre de tours spécifié autour d'un point de la carte.

Les deux chemins disponibles peuvent être combinés pour voler vers un point d'intérêt, tourner autour de celui-ci, puis s'arrêter à l'endroit spécifié.

Aller à

L'exemple de code suivant montre comment animer la caméra pour qu'elle se déplace vers un lieu :

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Voler autour

L'exemple de code suivant montre comment animer la caméra pour qu'elle survole un lieu :

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    rounds: 1
  });
}

Combiner des animations

L'exemple de code suivant montre comment combiner des animations pour faire voler la caméra jusqu'à un emplacement, puis la faire pivoter autour de cet emplacement lorsque la première animation se termine :

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

Étapes suivantes