設定 LocalContextMapView 的樣式

這個部分說明如何套用自訂地圖樣式及自訂地圖標記圖示的外觀，以自訂 LocalContextMapView 地圖的視覺外觀。

套用自訂地圖樣式

套用自訂樣式，即可自訂 LocalContextMapView 地圖的視覺外觀。但請注意，LocalContextMapView 的預設樣式與標準 Map 不同。

使用自訂樣式完全覆寫 LocalContextMapView 預設樣式 (styles 包含自訂樣式陣列) 的方法如下：

// Set the styles in map options.
localContextMapView.map.setOptions({
  styles,
});

在 LocalContextMapView 預設樣式的基礎上使用自訂樣式 (styles) 進行建構的方法如下：

TypeScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.ts

JavaScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.js

自訂標記圖示

您可以自訂圖釘顏色、字符顏色和比例 (尺寸)，來設定標記圖示的視覺外觀。請在初始化 LocalContextMapView 時執行這項操作。您可以將這些值設為靜態物件 (圖示樣式不會隨狀態變更)，或動態函式 (圖示經醒目顯示或選取時，圖示樣式就會改變)。

  • 自訂樣式應合併並疊放在預設樣式上。
  • 支援所有 CSS 顏色語法，包括 RGB、十六進位、HSL 和顏色關鍵字。
  • 比例必須是數值，比例 2 是比例 1 的兩倍，依此類推。根據預設，不同狀態的圖釘會設定不同的比例值。比例是絕對值，因此您傳入的值不會根據預設值改變圖釘尺寸，而是會覆寫預設值。舉例來說，如果將所有狀態的比例都設為 1，則無論狀態為何，圖釘尺寸都會相同。

靜態設定標記圖示的顏色和比例

您可以設定標記圖示和字符的預設顏色和比例。方法是指定 glyphColor 和 background 的顏色值，並指定 pinOptionsSetup 中 scale 的數值。以下範例將圖示設定為黑色、字符設為白色，並將比例增加為 2：

const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
    pinOptionsSetup: {glyphColor: '#FFF', background: '#000', scale: 2},
 });

動態設定標記圖示的顏色和比例

如要根據狀態 (預設、已醒目顯示或已選取) 設定標記圖示和字符的預設顏色，請使用條件陳述式設定每個狀態的所需值。使用者將滑鼠游標懸停在標記上時，isHighlighted 會變成 true。使用者按一下標記時，isSelected 會變成 true。地點詳細資料檢視畫面關閉時，標記圖示會還原為預設樣式。以下範例說明如何根據狀態變更標記圖示樣式：

pinOptionsSetup: ({isSelected, isHighlighted}) => {
  if (isHighlighted) {
    return {glyphColor: 'white', background: '#990000', scale: 1.5};
  }
  if (isSelected) {
    return {glyphColor: 'rgb(0, 128, 0)', background: 'pink', scale: 2};
  }
},

搭配當地特色 Beta 版使用雲端式地圖樣式設定

如要將雲端式地圖樣式設定與當地特色 Beta 版搭配使用，請按照下列步驟操作：

  1. 使用 mapId 建立 Map，並傳遞至 LocalContextMapView
  2. 停用一般搜尋點的標籤和圖示。
  3. 停用內部 Map 選項的一些元素。這些為選用步驟。

使用 mapId 建立 Map，並傳遞至 LocalContextMapView

如要使用雲端式地圖樣式設定 ID 新增地圖，請定義 map 元素 (包括 ID 和所有內部 Map 選項)，然後使用該元素初始化 LocalContextMapView，如以下範例所示：

    function initMap() {
      const mapWithId = new google.maps.Map(document.createElement('div'),
        {center: {lat: 37.7749, lng: -122},
        zoom: 10,
        mapId: 'YOUR_MAP_ID_HERE'});
      const localContextMapView = new google.maps.localContext.LocalContextMapView({
        element: document.querySelector("#map"),
        placeTypePreferences: ["restaurant", "bar"],
        map: mapWithId,
        maxPlaceCount: 12,
      });
    };

停用一般搜尋點的標籤和圖示

如要停用一般搜尋點的標籤和圖示，請按照下列步驟操作：

  1. 前往 Google Cloud 控制台，然後選取「地圖樣式」以開啟「地圖樣式」畫面。
  2. 在「搜尋點」的樣式設定中，將「標籤」和「圖示」的「瀏覽權限」設為「停用」。
  3. 在「搜尋點」的樣式設定中，將「公園標籤」的「瀏覽權限」設為「啟用」。

設定內部 Map 選項 (選用)

除了已設定的任何其他內部 Map 選項外，建議您也設定下列內部 Map 選項，如下所示：

localContextMapView.map.setOptions({
  // ...
  clickableIcons: false,
});