Maps
地圖代表單一供應商（例如飯店或體驗提供者）或庫存（即房間類型、會議室、水療中心等）或庫存集合（例如精選清單或已儲存的搜尋），並透過包含可預訂地圖標記的互動式地圖顯示這些詳細資訊。 使用者可以透過以下方式與地圖互動：
- 縮放、平移和拖曳地圖以查看可用庫存。
- 點擊地圖標記即可查看庫存詳情卡片。
本文的其餘部分將引導您了解如何建立、自訂和共享地圖。
可以透過兩種方式創建地圖：
上面的圖片取自搜尋 並向您展示您可以對搜尋結果執行的一些操作。其中一項行動是Make a map。
點擊該按鈕，它將把您重定向到我們的地圖表單頁面，您可以在其中開始自訂地圖。
兩個都精選列表 和已儲存的搜尋 附帶一個可讓您建立地圖的操作。該地圖將包含這些清單中所有庫存的地圖標記。
該表單允許您透過以下方式自訂地圖：
- 給它一個名字，以便您記住地圖的內容。
- 選擇是否允許使用者在地圖上移動。
- 設定地圖的高度（以像素為單位）。
- 選擇是否允許使用者放大和縮小地圖。
- 選擇與您要嵌入地圖的網站相符的地圖樣式。
- 選擇標記顏色。
- 選擇您希望使用者先看到的初始卡面。預設情況下，它是該庫存的原生面。
- 您可以新增自己的標記、圓形、矩形和多邊形來指示地圖上使用者可能感興趣的其他位置。
- 點選
Save按鈕繼續。
儲存地圖後，您將被重新導向到地圖頁面，現在可以與全世界分享您的地圖了。
上圖顯示了地圖上所有可用的操作：
- 更新 更新您的地圖配置。
- 加入 WinkLinks 將地圖新增至您的 WinkLinks 帳戶。
- 嵌入 向您展示如何將此地圖嵌入為地圖 進入您的網站。
- 與 WordPress 一起使用 向您展示如何使用我們的WordPress 外掛 將此地圖嵌入到您的網站。
下面我們將更詳細地介紹其中一些選項。
<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-內容載入器 Web 元件並告訴它為您的程式碼取得廣告橫幅。
- 第 11 行向您展示如何將我們的 Javascript 嵌入到您的網站。
- 第 13 行展示如何嵌入wink-app-loader Web 元件並告訴它要取得您的頁面層級配置首選項。
想要管理地圖的開發者可以前往開發人員 > API > 庫存。
- 進一步了解我們的收藏Web 元件。
- 詳細了解Wink WordPress 插件。