調整當地特色搜尋範圍

您可以將 LocalContextMapView Place Search 的 locationRestriction 參數,從嚴格受限於地圖可視區域的預設值,變更為其他設定。在本例中,我們將 locationRestriction 的範圍設為遠大於地圖的初始可視區域。只要按下地點選擇器中的地點,地圖就會移動到所選地點供您查看。

瞭解程式碼

指定當地特色搜尋範圍

請使用 LatLngBounds 屬性定義 locationRestriction 嚴格搜尋範圍。本例使用 LatLngBoundsLiteral 介面建立 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 },
});

當地特色地圖可視區域與 directionsOptions 之間的關係

如果所選搜尋點不在目前的可視區域內,當地特色地圖檢視畫面就會自動移動,以在可見範圍內顯示搜尋點,無須使用任何程式碼來管理地圖。

如果您沒有為 LocalContextMapViewdirectionsOptions 屬性指定起點,地圖會移動並只顯示所選搜尋點。

如果您為 directionsOptions 指定起點,地圖會同時顯示起點和所選搜尋點,以及兩點之間的步行路線。

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

試用範例