Répondre aux événements contextuels locaux

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Si vous avez une mise en page qui doit changer lorsque la vue détaillée sur ce lieu est affichée, utilisez les écouteurs d'événements placedetailsviewshowstart et placedetailsviewhidestart. Dans l'exemple ci-dessous, trois quartiers sont indiqués par des repères personnalisés. Lorsque l'utilisateur clique sur l'un de ces repères, une InfoWindow s'ouvre et décrit le quartier. Si un utilisateur clique sur un POI lorsqu'une InfoWindow est ouverte, l'InfoWindow se ferme lorsque la vue détaillée sur ce POI s'affiche, puis s'ouvre à nouveau lorsque l'utilisateur ferme la vue.

Comprendre le code

Gérer une InfoWindow avec des événements de vue détaillée sur le lieu

Lorsque la vue détaillée sur le lieu s'ouvre et que vous appelez InfoWindow.close(), l'InfoWindow ouverte est supprimée du DOM. Pour créer l'effet de "réouverture" de l'InfoWindow, vous devez stocker les propriétés de l'InfoWindow dans une variable en dehors du DOM afin de pouvoir recréer l'InfoWindow lorsque vous voulez l'afficher à nouveau. Le meilleur moment pour enregistrer les informations dans une variable de stockage est la création de l'InfoWindow.

let infoStorage;

function createInfoWindow(district, marker) {
  // Build the content of the InfoWindow
  let contentDiv = document.createElement('div');
  ...

  // Create and open a new InfoWindow
  infoWindow = new google.maps.InfoWindow();
  infoWindow.setContent(contentDiv);
  infoWindow.open(map, marker);

  // Store key properties of the InfoWindow for future restoration
  infoStorage = {
    'district': district,
    'marker': marker,
  };
}

Plus tard, lorsque la vue détaillée sur le lieu sera fermée, vous pourrez appeler la même fonction de création de l'InfoWindow pour recréer la dernière InfoWindow ouverte.

TypeScript

localContextMapView.addListener("placedetailsviewhidestart", () => {
  if (infoStorage) {
    createInfoWindow(infoStorage.district, infoStorage.marker);
  }
});

JavaScript

localContextMapView.addListener("placedetailsviewhidestart", () => {
  if (infoStorage) {
    createInfoWindow(infoStorage.district, infoStorage.marker);
  }
});

Modifier le point de départ de l'itinéraire

Étant donné que l'utilisateur peut choisir plusieurs repères de quartier sur cette carte, nous modifions le point de départ de directionsOptions en fonction du dernier quartier ayant enregistré le clic en utilisant les lignes dans l'écouteur de clics du repère. Cela démontre que directionsOptions peut être mis à jour même après l'initialisation de localContextMapView.

Essayer l'exemple