Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Mude o parâmetro locationRestriction da pesquisa de lugar LocalContextMapView para evitar o limite rigoroso da janela de visualização do mapa. Neste exemplo, definimos os limites de locationRestriction para serem muito maiores do que a janela de visualização inicial do mapa. Clique em um lugar no seletor e confira como o mapa se move para mostrar essa seleção.
Acessar código-fonte
TypeScript
let map: google.maps.Map;
function initMap() {
const center = { lat: 37.4219998, lng: -122.0840572 };
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 },
});
map = localContextMapView.map!;
new google.maps.Marker({ position: center, map: map });
map.setOptions({
center: center,
zoom: 16,
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<html>
<head>
<title>Local Context Restrictions</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext&v=beta"
defer
></script>
</body>
</html>
Defina os limites de pesquisa rigorosos de locationRestriction com uma propriedade LatLngBounds. Neste exemplo, usamos a interface LatLngBoundsLiteral para criar um objeto LatLngBounds.
A relação entre a janela de visualização de mapa do Contexto local e directionsOptions
A visualização de mapa do Contexto local se move de forma automática para mostrar, dentro dos limites visíveis, um ponto de interesse (PDI) selecionado quando ele não aparece na janela de visualização atual, sem necessidade de códigos para gerenciar o mapa.
Se você não especificar um ponto de origem para a propriedade directionsOptions de LocalContextMapView, o mapa vai se mover para mostrar apenas o PDI selecionado.
Se você especificar directionsOptions com um ponto de origem, ele vai mostrar a origem e o PDI selecionado, além do trajeto a pé entre os dois pontos.