基本 LocalContextMapView

以下是基本的當地特色地圖檢視,不含任何自訂項目。我們指定當地特色資料庫專屬的必要屬性 placeTypePreferencesmaxPlaceCount,以及基本 Map 屬性 centerzoom

瞭解程式碼

當地特色地圖選項

當地特色地圖是以 google.maps.localContext.LocalContextMapView 類別來表示,而非 google.maps.Map 類別。LocalContextMapView 建構函式的三個必要參數是指文件物件模型 (DOM) 中的元素:地圖檢視的容器、要納入的地點類型清單,以及要顯示的地點結果數量上限。

TypeScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [
    { type: "restaurant" },
    { type: "tourist_attraction" },
  ],
  maxPlaceCount: 12,
});

JavaScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [
    { type: "restaurant" },
    { type: "tourist_attraction" },
  ],
  maxPlaceCount: 12,
});

定義當地特色地圖可視區域

Place Search 的預設 locationRestriction 邊界是由地圖可視區域定義。第一次呼叫 google.maps.localContext.LocalContextMapView.map.setOptions() 時,如果針對地圖載入定義中心點和縮放等級,系統就會建立地圖可視區域。

TypeScript

map.setOptions({
  center: { lat: 51.507307, lng: -0.08114 },
  zoom: 14,
});

JavaScript

map.setOptions({
  center: { lat: 51.507307, lng: -0.08114 },
  zoom: 14,
});

後續呼叫 setOptions() 時,系統不會重新整理當地特色資料庫顯示的精選地點。

試用範例