Puedes cambiar el parámetro locationRestriction
de la búsqueda de lugar LocalContextMapView
para que no se limite estrictamente al viewport del mapa de acuerdo con la configuración predeterminada. En este ejemplo, configuramos los límites de locationRestriction
para que sean mucho más amplios que el viewport inicial del mapa. Haz clic en un lugar del selector de lugares para ver cómo se desplaza el mapa para mostrar el lugar seleccionado.
Comprende el código
Cómo especificar los límites de búsqueda de Contexto local
Define los límites de búsqueda estrictos de locationRestriction
con una propiedad LatLngBounds
. En este ejemplo, se usa la interfaz LatLngBoundsLiteral
para crear un objeto 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 }, });
La relación entre el viewport del mapa de Contexto local y directionsOptions
Cuando un lugar de interés seleccionado se encuentra fuera del viewport actual, la vista del mapa de Contexto local se mueve automáticamente para mostrar ese lugar de interés dentro de los límites visibles sin necesidad de ningún código para administrar el mapa.
Si no especificas un punto de origen para la propiedad directionsOptions
de LocalContextMapView
, el mapa se moverá para mostrar solo el lugar de interés seleccionado.
Si especificas directionsOptions
con un punto de origen, el mapa mostrará el origen y el lugar de interés seleccionado, junto con la ruta a pie entre los dos puntos.
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 }, });