跳到內容
Academy

地圖

地圖代表單一供應商（例如飯店或體驗提供者）、庫存（即房型、會議室、SPA 等）或一組庫存，如精選清單或已儲存的搜尋，並透過包含可預訂地圖標記的互動地圖呈現這些細節。 使用者可以透過以下方式與地圖互動：

帶有標記的地圖
帶有地圖標記的地圖
  • 縮放、平移和拖曳地圖以查看可用庫存。
  • 點擊地圖標記以查看以 Card 形式呈現的庫存細節。
展開卡片的地圖
帶有可預訂庫存的地圖

本文接下來將引導您如何建立、自訂及分享您的地圖。

建立地圖

Section titled “建立地圖”

地圖可以透過兩種方式建立：

單一標記地圖

Section titled “單一標記地圖”
操作
搜尋結果操作

上圖取自搜尋，展示您可以對搜尋結果執行的一些操作。其中一個操作是 Make a map。 點擊該按鈕後，系統會導向地圖表單頁面，您可以開始自訂您的地圖。

多標記地圖

Section titled “多標記地圖”

精選清單和已儲存的搜尋皆提供建立地圖的操作。此地圖將包含該清單中所有庫存的地圖標記。

自訂地圖

Section titled “自訂地圖”

表單允許您以以下方式自訂地圖：

  1. 為地圖命名，方便您記住地圖內容。
  2. 選擇是否允許使用者在地圖上移動。
  3. 設定地圖的高度（以像素為單位）。
  4. 選擇是否允許使用者縮放地圖。
  5. 選擇與您將嵌入地圖的網站風格相符的地圖樣式。
  6. 選擇標記顏色。
  7. 選擇使用者首次看到的初始卡片面。預設為該庫存的原生面。
  8. 您可以新增自己的標記、圓形、矩形和多邊形，以標示地圖上使用者可能感興趣的其他位置。
  9. 點擊 Save 按鈕繼續。

儲存地圖後，系統會導向您的地圖頁面，您的地圖即可與全世界分享。

分享地圖

Section titled “分享地圖”
地圖
帶有收合操作選單的地圖項目

上圖展示了您的地圖可用的所有操作：

  • Update 更新您的地圖設定。
  • Add to WinkLinks 將地圖新增至您的 WinkLinks 帳戶。
  • Embed 顯示如何將此地圖作為地圖嵌入您的網站。
  • Use with WordPress 顯示如何使用我們的WordPress 外掛將此地圖嵌入您的網站。

以下將更詳細介紹其中一些選項。

嵌入

Section titled “嵌入”
<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="MAP"
       id="64d7cbc8-61df-11ef-9722-42004e494300"
    ></wink-content-loader>


    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>


    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

以下說明如何將您的地圖嵌入網站：

  • 第 3 行示範如何將 Wink 樣式嵌入您的網站。
  • 第 6 至 9 行示範如何使用 wink-content-loader Web 元件，並告訴它抓取您的廣告橫幅。
  • 第 11 行示範如何將我們的 Javascript 嵌入您的網站。
  • 第 13 行示範如何嵌入 wink-app-loader Web 元件，並告訴它抓取您的頁面級設定偏好。

API

Section titled “API”

想管理地圖的開發者可以前往 Developers > API > Inventory。

延伸閱讀

Section titled “延伸閱讀”