Ajustar limites de pesquisa do Contexto local

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.

Entender o código

Especificar limites de pesquisa do Contexto local

Defina os limites de pesquisa rigorosos de locationRestriction com uma propriedade LatLngBounds. Neste exemplo, usamos a interface LatLngBoundsLiteral para criar um 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 },
});

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.

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

Testar amostra