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 }, });