Gérer les événements et les interactions des utilisateurs

Vous pouvez gérer les événements à la fois sur l'instance LocalContextMapView et sur la carte interne. LocalContextMapView n'accepte que deux événements, qui se déclenchent lorsqu'un utilisateur sélectionne un lieu (en ouvrant les détails du lieu) et lorsqu'il le ferme. Ces événements vous permettent de mettre à jour tous les éléments de l'UI.

  • placedetailsviewshowstart est déclenché lorsque l'utilisateur sélectionne un lieu, avant que les détails de ce lieu soient affichés.
  • placedetailsviewhidestart est déclenché lorsque l'utilisateur ferme les détails du lieu avant que cette vue soit masquée.

L'exemple suivant montre comment définir les deux écouteurs compatibles sur une instance LocalContextMapView (vous pouvez le faire dans votre fonction initMap()) :

// Set the LocalContextMapView event handlers.
localContextMapView.addListener('placedetailsviewshowstart', () => {
  console.log("The 'placedetailsviewshowstart' event just fired!");
});

localContextMapView.addListener('placedetailsviewhidestart', () => {
  console.log("The 'placedetailsviewhidestart' event just fired!");
});

Vous pouvez également traiter les événements d'interface utilisateur sur la carte créée à partir de LocalContextMapView. L'exemple suivant montre un gestionnaire d'événements qui est déclenché chaque fois que la carte détecte un événement de survol avec la souris :

// Set a mouseover event handler on the inner map.
localContextMapView.map.addListener('mouseover', () => {
  console.log("The mouse just entered the map!");
});

LocalContextMapView ferme également les détails du lieu ou la photo en mode Lightbox lorsque l'utilisateur appuie sur la touche Échap. Si vous souhaitez modifier ce comportement, nous vous recommandons d'ajouter un écouteur pour l'événement "keydown" et la touche Échap sur l'objet "window" afin d'intercepter le comportement par défaut dans la phase de capture :

// Change the escape key behavior.
window.addEventListener('keydown', event => {
  if (event.key !== 'Escape') return;
  event.stopPropagation();
  // Handle the event.
  // ...
}, /* useCapture= */ true);

Sinon, pour autoriser LocalContextMapView à traiter les événements du clavier avant votre code, ajoutez un écouteur "keydown" sur l'objet "window" pendant la phase de bouillonnement :

// Won't be fired if LocalContextMapView handled the escape key to close
// the place details view or photo lightbox:
window.addEventListener('keydown', event => {
  if (event.key !== 'Escape') return;
  // Handle the event.
  // ...
}, /* useCapture= */ false);

En savoir plus