Ajuster les limites de la recherche en contexte local

Vous pouvez modifier le paramètre locationRestriction de la recherche de lieu LocalContextMapView en remplaçant le paramètre par défaut (qui applique une liaison stricte à la fenêtre d'affichage de la carte). Dans cet exemple, nous définissons les limites de locationRestriction de manière à ce qu'elles soient beaucoup plus grandes que la fenêtre d'affichage initiale de la carte. Pour déplacer la carte afin qu'elle affiche un lieu donné, cliquez sur celui-ci dans le sélecteur de lieux.

Comprendre le code

Spécifier des limites de recherche de contexte local

Définissez les limites de recherche strictes locationRestriction avec une propriété LatLngBounds. Cet exemple utilise l'interface LatLngBoundsLiteral pour créer un objet LatLngBounds.

TypeScript

const bigBounds = {
  north: 37.432,
  south: 37.412,
  west: -122.094,
  east: -122.074,
};
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

JavaScript

const bigBounds = {
  north: 37.432,
  south: 37.412,
  west: -122.094,
  east: -122.074,
};
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

Relation entre la fenêtre d'affichage de la carte de contexte local et les directionsOptions

Lorsqu'un point d'intérêt (POI) sélectionné se trouve en dehors de la fenêtre d'affichage actuelle, la vue Plan de contexte local l'affiche automatiquement dans les limites visibles, sans qu'aucun code ne soit nécessaire pour gérer la carte.

Si vous ne spécifiez pas de point de départ pour la propriété directionsOptions de LocalContextMapView, la carte se déplace pour n'afficher que le POI sélectionné.

Si vous spécifiez directionsOptions avec un point de départ, la carte affiche à la fois le point de départ et le POI sélectionné, ainsi que l'itinéraire à pied entre ces deux points.

TypeScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

JavaScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

Essayer l'exemple