設定當地特色選項和地圖選項

這個部分說明您可以在 LocalContextMapView 執行個體上設定的選項，以及 LocalContextMapView 包含的內部 Map。建立新的 LocalContextMapView 執行個體時，您可以指定最多 10 種地點類型，以及可傳回的地點數量上限 (最多 24 個)。內部 Map 支援與標準 Maps JavaScript API Map 相同的所有 MapOptions。

當地特色資料庫初始化完成後，您隨時都可以更新當地特色搜尋屬性。更新 maxPlaceCount、placeTypePreferences、locationRestriction 或 locationBias 中的任一項，可能會自動觸發新的搜尋。

指定地點類型

您可以指定最多 10 種當地特色資料庫應傳回的地點類型。使用 placeTypePreferences 屬性即可指定地點類型，並傳遞一或多個地點類型，如以下範例所示：

placeTypePreferences: ['restaurant', 'cafe']

設定地點類型的權重

您可以選擇為每個指定類型指派相對權重，讓權重值較高的類型較常顯示。權重是選填的進階參數，應僅視需要使用。省略此參數時，當地特色資料庫會判斷預設權重，而此權重可能會隨著時間變更及改善。

您可以使用 weight 屬性為每個屬性指派相對權重。以下範例顯示如何設定指定地點類型的權重，使傳回的 restaurant 和 cafe 結果為 primary_school 的兩倍：

placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]

結果取決於特定區域中是否存在特定地點類型。舉例來說，假如這個區域沒有任何購物中心，將 10 的權重指派給 shopping_mall 就不會產生任何效果。

設定地點數量上限

如要設定當地特色資料庫應傳回的地點數量上限 (最多 24 個)，請使用 maxPlaceCount 屬性，如下所示：

maxPlaceCount: 12

設定地點限制

根據預設，系統會將搜尋區域的範圍限制在地圖可視區域。您可以指定一組範圍，將搜尋結果限制在的一個較大或較小的區域，做法是將 LocalContextMapView 的 locationRestriction 屬性設為所需的 LatLngBounds。這個值可以大於或小於地圖可視區域。查看範例。

啟用路線

如要在地圖上啟用路線，請設定 LocalContextMapView 的 directionsOptions 屬性，並傳遞起點的 LatLng 物件常值 (終點取決於目前選取的地點)。如未傳遞起點，路線就會停用。以下範例顯示如何設定起點，在地圖上啟用步行路線：

directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},

地圖可視區域的尺寸 (如地圖範圍和縮放等級所定義)，會直接影響由特定起點可傳回的距離。例如，如果可視區域設定為顯示寬度為 100 英里的區域，則搜尋點最遠可能會顯示在距離起點 50 英里的位置。為了確保應用程式傳回距離合理的步行路線，您可以：

  • 在縮放等級較低時停用步行路線 (通常低於縮放等級 16)。
  • 使用較小的範圍區域定義 locationRestriction，這樣可以防止搜尋點顯示在限制區域以外的任何位置。

變更路線起點

您可以在 LocalContextMapView 的生命週期期間，隨時變更 directionsOptions 屬性的值。以下範例顯示如何設定 directionsOptions 的新值：

localContextMapView.directionsOptions = {
  origin: {lat: 47.6532809, lng: -122.3512206},
};

或

localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};

設定版面配置和瀏覽權限

設定 LocalContextMapView 的 placeChooserViewSetup 和 placeDetailsViewSetup 屬性，即可為地點詳細資料檢視畫面和地點選擇器，設定初始版面配置位置和瀏覽權限設定選項。您也可以透過程式輔助方式隱藏地點詳細資料檢視畫面。

設定地點選擇器版面配置位置

您可以在初始化 LocalContextMapView 時，設定地點選擇器的版面配置位置。版面配置位置與文件方向相關聯，取決於應用程式為由左到右 (LTR) 或由右到左 (RTL)。

地點選擇工具有三個版面配置選項：

  • INLINE_START 會設定在內容流程的「開頭處」顯示地點選擇工具 (如果是 LTR 則為地圖左側，RTL 則為右側)。
  • INLINE_END 會設定在內容流程的「結尾處」顯示地點選擇工具 (如果是 LTR 則為地圖右側，RTL 則為左側)。
  • BLOCK_END 會設定在網頁的「底部」顯示地點選擇工具 (LTR 和 RTL 皆是如此)。

將地點挑選器位置設為 INLINE_START 或 INLINE_END 時，一律必須將地點詳細資料檢視畫面的位置設為相同的值。您也可以選擇將地點詳細資料檢視畫面設定為顯示在資訊視窗中。如果是 BLOCK_END，地點詳細資料檢視畫面版面配置模式必須「一律」設為 INFO_WINDOW。

當地特色資料庫會根據算繪出的 LocalContextMapView 尺寸調整地點選擇器位置。根據預設，在較大的 LocalContextMapView 中，地點選擇器會顯示在內容流程的開頭處 (如果是 LTR 則為地圖左側，RTL 則為右側)。在較小的 LocalContextMapView 中 (例如在行動裝置上)，預設會改為在地圖底部顯示地點選擇器，並在資訊視窗中顯示地點詳細資訊。瀏覽器縮放等級會影響地點選擇器位置在側邊和底部之間轉換時的像素尺寸 (門檻會隨著縮放等級按比例增加)。

建議您使用函式呼叫設定地點選擇器的預設位置。直接宣告這些值會覆寫任何回應式版面配置變更。

在內容流程的開頭處顯示地點選擇器

如要將地點選擇器設定為顯示在內容流程的開頭處 (如果是 LTR 則為地圖左側，RTL 則為右側)，請將 placeChooserViewSetup 和 placeDetailsViewSetup 兩者的 position 設為 INLINE_START，如以下範例所示：

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
});

在內容流程的結尾處顯示地點選擇器

如要將地點選擇器設定為顯示在內容流程的結尾處 (如果是 LTR 則為右側，RTL 則為左側)，請將 placeChooserViewSetup 和 placeDetailsViewSetup 兩者的 position 設為 INLINE_END，如以下範例所示：

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
});

在底部顯示地點選擇器

如要將地點選擇器設定為顯示在地圖底部，請將 placeChooserViewSetup 的 position 設為 BLOCK_END，並將 placeDetailsViewSetup 的 layoutMode 設為INFO_WINDOW，如以下範例所示：

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'BLOCK_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {layoutMode: 'INFO_WINDOW'};
    }
  },
});

隱藏地點選擇器

地點選擇器預設為顯示。如要隱藏地點選擇器，請將 layoutMode 設為 HIDDEN，如以下範例所示：

placeChooserViewSetup: {layoutMode: 'HIDDEN'},

以下範例顯示如何在預設位置變更為 BLOCK_END 時隱藏地點選擇器：

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  placeChooserViewSetup: ({defaultPosition}) => {
    if (defaultPosition === 'BLOCK_END') {
      return {layoutMode: 'HIDDEN'};
    }
  },
});

在資訊視窗中顯示地點詳細資料檢視畫面

如要在資訊視窗中顯示地點詳細資料檢視畫面，請將 layoutMode 設為 INFO_WINDOW，如以下範例所示：

placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},

這項設定可與任何地點選擇器位置 (左側、右側或底部) 搭配使用。

以程式輔助方式隱藏地點詳細資料檢視畫面

您可以針對 LocalContextMapView 執行個體呼叫 hidePlaceDetailsView()，以程式輔助方式隱藏地點詳細資料檢視畫面，如以下範例所示：

localContextMapView.hidePlaceDetailsView()

根據預設，按一下地圖即可隱藏地點詳細資料檢視畫面。您可以將 placeDetailsViewSetup 中的 hidesOnMapClick 選項設為 false，以避免出現這個預設行為。

// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: {hidesOnMapClick: false},
});

如果只要在使用者點選地圖時隱藏地點詳細資料資訊視窗，您可以有條件地控制 hidesOnMapClick 值的設定，如以下範例所示：

// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
  },
});

設定內部 Map 選項

取得 LocalContextMapView 執行個體後，您就可以在內部 Map 執行個體中設定 MapOptions。LocalContextMapView 內含的 Map 支援與標準 Maps JavaScript API 地圖相同的所有地圖選項。以下範例顯示如何建立新的 LocalContextMapView 執行個體，以及在內部 Map 上設定一些選項：

// Instantiate LocalContextMapView.
function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
  });

  // Set inner map options.
  localContextMapView.map.setOptions({
    center: pos,
    zoom: 14,
    mapTypeId: 'satellite',
  });
}