圖表

結合 Google 地圖和 Webflow 地圖組件的強大功能,在您的網站上嵌入互動式地圖。

圖表 標籤可讓您使用 Google Maps JavaScript API 將互動式圖形嵌入到您的網站中。您可以選擇定義要強調的位置並選擇各種顯示首選項。

在本教程中
  1. 插入圖表
  2. 建立 API 金鑰
  3. 自訂您的圖表設置
  4. 設計你的圖表
開始之前

如果您打算使用圖表元素,則必須取得 Google 地圖 API 金鑰。沒有鍵的圖表將顯示標有“僅用於開發目的”的低解析度地圖。下面提供了更多詳細資訊。

插入圖表

您可以將圖表元素放置在網頁上 插入元素 部分中的 (A) → 組件 控制板。

如果您在畫布上插入圖表而未將 Google Maps JavaScript API 金鑰新增至專案設定中,則會顯示灰色圖表佔位符。

整合圖表的替代方法

您可以透過將 Google 地圖 URL 貼到文字區塊中來嵌入圖表。 富媒體 可用的嵌入功能 加號(+) 當遊標位於文字編輯器中的新行上時的選單。了解更多有關富媒體的資訊。

您也可以直接從整合靜態 Google 圖表 Google地圖 網站。簡單地 複製嵌入程式碼 並將其貼到頁面上的嵌入元件中。透過編輯程式碼本身來調整圖表的寬度和高度。將兩者都設定為 100%,然後將特定的寬度和高度尺寸分配給 嵌入元素風格面板 以獲得所需的尺寸。

探索這些指南以合併來自各種圖表平台的圖表。

建立 API 金鑰

要在您的網站上使用即時圖表,您必須建立 API 金鑰並將其連結到您的專案。

  1. 訪問 圖表設定 (雙擊畫布上的圖表或選擇它並按 Enter 鍵)。
  2. 點選 「新增 API 金鑰」。您將被引導至您的 項目設定 → 整合 → Google 地圖。您將在此輸入 Google 地圖的 API 金鑰。
 

產生 API 金鑰

參觀 Google地圖平台,啟動該流程並按照說明產生您的 API 金鑰:

  1. 選擇地圖
  2. 建立新項目或從下拉清單中選擇現有項目
  3. 配置您的 Google雲端平台計費帳號
  4. 使用權 證書 在左側
  5. 選擇 創建憑證。選擇 API 金鑰。
  6. 啟動項目的API
  7. 複製產生的 API 金鑰

將 API 金鑰插入您的項目

複製 API 金鑰後,您必須將其插入您的專案中:

  1. 訪問您的 項目設定 → 整合 選項卡 → Google 地圖 部分
  2. 將 API 金鑰貼到 Google 地圖 JavaScript API 金鑰 場地
  3. 儲存修改
  4. 發布 你的網站
 

限制您的 API 金鑰

  1. 傳回 Google 開發者控制台(您從中複製 API 金鑰的地方)
  2. 點選約束鍵
您也可以在憑證 → 憑證 → API 金鑰下存取關鍵約束。按一下所需的 API 以實施限制。
  1. 選擇 HTTP 引薦來源網址(網站) 之內 關鍵限制
  2. 在下方指定您的網域 接受來自這些 HTTP 引薦來源網址(網站)的請求
  3. 節省 您的關鍵限制

在 Google 上註冊您的項目

要啟動 Maps API,您可能需要註冊您的專案。按照以下說明註冊您的專案並啟動 Maps API:

  1. 訪問 Google 開發者控制台
  2. 選擇要啟用 API 的特定項目
  3. 選擇 圖書館 側面板上的選項卡
  4. 地圖 分段,單擊 地圖 JavaScript API
  5. 如果 API 已啟用,則無需執行進一步操作。
  1. 如果 使能夠 按鈕可見,只需按下它即可啟動您的飯店的 API。
基本細節 — Google 地圖平台 API 與計費

注意:本節中共享的資訊可能已過時。建議參考 Google 的 documentation 以了解最新更新。

Google 地圖平台為其地圖 API 引入了新的即用即付定價結構,該結構於 2018 年 7 月 16 日生效。每月為每個計費帳戶分配 $200 美元 Google 地圖平台積分。該積分每月為用戶提供 28,000 次免費頁面載入。超過此限制將導致對於初始 100,000 個地圖加載,每次加載地圖收取 0.007 美元的費用。 進一步探索 Maps JavaScript API 的使用和計費.
對於現有的地圖 API, Google 地圖平台過渡工具 可用於向正在進行的項目引入計費並保護 API 金鑰。
有關更多詳細信息,請參閱 Google 地圖 API 常見問題解答 頁。如需與 Google 地圖 API 相關的協助和其他查詢,請造訪 Google 地圖平台支援與資源 頁。

自訂您的地圖首選項

地圖元件將在設計器中顯示地圖的標準預覽,而實際地圖則可在您發佈的網站上查看。

這是通用預覽 - 您可以在發布的網站上查看實際地圖。
‍這是通用預覽 - 您可以在發布的網站上查看實際地圖。

若要更新地圖,請雙擊它,輸入位址或大致位置,然後按 Enter 鍵。如果 Google 地圖識別該位址,它將在位址欄位中自動更新。

 

探索偏好

透過點擊造訪其他地圖設置 顯示所有設定 在彈出模式中或導覽至元素設定面板。這提供了對地圖的特定外觀和功能的控制,允許調整以下內容:

  • 工具提示 – 定義要在地圖圖釘上方顯示的位置的文字
  • 飛漲 – 調整地圖上的放大倍率。值 0 顯示更廣泛的區域,而 18 則放大指定位置。
  • 地圖類型 – 從四種地圖類型中進行選擇:道路、地形、衛星或混合。
 

導航和互動偏好

修改地圖如何響應用戶交互 元素設定面板→地圖設定。

  • 滾輪 – 啟用或停用地圖上的滾輪縮放。地圖邊界內的滾輪移動將改變縮放等級。取消選取此選項可防止意外縮放。
 
  • 觸摸拖曳 – 啟用或停用兩指觸控操作,例如在觸控裝置上平移和縮放。停用此功能可防止在使用觸控手勢捲動或導覽頁面時出現不必要的移動。
 

設計你的地圖

若要針對特定行為和定位個人化地圖元件,請調整其尺寸和樣式。類別重命名和應用程式可以在專案內的多個地圖中一致使用。

要查看地圖外觀,請發布網站並導航到您的網站。

 
麥伊凡
Ewan Mak 的最新帖子 (看全部)