地點圖示

地點圖示會指出不同類型的地點 (例如咖啡店、圖書館和博物館)。您可以使用 Place 類別或地點介面集服務來要求圖示和相關背景顏色。

欄位

請搭配下列欄位使用地點圖示：

• icon 會傳回 71 像素 x 71 像素 PNG 彩色圖示的網址 (僅限地點介面集服務)。
• iconBackgroundColor 和 icon_background_color 會傳回地點圖示類別的預設十六進位顏色代碼。
• icon_mask_base_uri (地點介面集服務) 會傳回非彩色圖示的基準網址，刪除檔案類型副檔名 (附加 .svg 或 .png)。
• svgIconMaskURI (Place 類別) 會傳回非彩色 SVG 圖示的基準網址。

將地點圖示和顏色套用至標記

您可以透過 Place Details 要求地點圖示和背景顏色，並套用至標記。下例顯示使用地點資料建立標記的程式碼：將 place.iconBackgroundColor 傳遞至 PinElement.background 選項，並將 place.svgIconMaskURI 傳遞至 PinElement.glyph。然後使用 place.location 將標記放在正確位置。此外，本例也會在標記標題中顯示 place.displayName。

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
    id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] });

const pinElement = new PinElement({
    background: place.iconBackgroundColor,
    glyph: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarkerView = new AdvancedMarkerElement({
    map,
    position: place.location,
    content: pinElement.element,
    title: place.displayName,
});
index.ts

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
  id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({
  fields: [
    "location",
    "displayName",
    "svgIconMaskURI",
    "iconBackgroundColor",
  ],
});

const pinElement = new PinElement({
  background: place.iconBackgroundColor,
  glyph: new URL(String(place.svgIconMaskURI)),
});
const placeIconMarkerView = new AdvancedMarkerElement({
  map,
  position: place.location,
  content: pinElement.element,
  title: place.displayName,
});
index.js

地點圖示和背景顏色要求

下表依類別列出所有可用的地點圖示。圖示會預設以黑色字符顯示。圖示背景顏色取決於地點類別。

地點類別：餐飲 (圖示背景顏色 #FF9E67)
酒吧、 夜店	咖啡館	餐廳、麵包店
地點類別：零售 (圖示背景顏色 #4B96F3)
書籍、服飾、電子產品、珠寶、鞋子、 購物中心/商場	便利商店	雜貨店、超市	藥局
地點類別：服務 (圖示背景顏色 #909CE1)
提款機	銀行	加油站	住宿地點
郵局
地點類別：娛樂 (圖示背景顏色 #13B5C7)
水族館、觀光旅遊	高爾夫	歷史古蹟	電影
博物館	劇場
地點類別：交通運輸 (圖示背景顏色 #10BDFF)
機場	公車、代僱駕駛服務、計程車	火車/鐵路
地點類別：市政/一般/宗教 (圖示背景顏色 #7B9EB0)
墓園	市政建築	圖書館	紀念碑
停車場	學校 (小學、中學、大專院校)	宗教 (基督教)
宗教 (印度教)	宗教 (伊斯蘭教)	宗教 (耆那教)	宗教 (猶太教)
宗教 (錫克教)	一般業務
地點類別：戶外 (圖示背景顏色 #4DB546)
乘船	露營	公園	體育場館
動物園
地點類別：緊急狀況 (圖示背景顏色 #F88181)
醫院	警察局