免費網站天氣與海水溫度小工具
只需不到一分鐘，即可在您的網站上免費新增海水溫度和天氣小工具。支援全球174個海灘和沿海城市，只需複製嵌入程式碼，將其貼到頁面任意位置 – 頁尾、側邊欄或部落格文章。這款毛玻璃質感的卡片能完美融入任何頁面，自動適應背景顏色，並以您網站的語言顯示標籤，看起來就像您自己設計的一部分。它與即時天氣、氣溫和UV指數並排顯示即時水溫，支援WordPress、Wix或純HTML，並自動更新 – 無需註冊。
選擇目的地
Auto 會自動融入頁面 – 它會讀取背景顏色並匹配亮色或暗色文字。
預覽
這是真實的即時卡片，完全等同於訪客所見。
複製程式碼
<!-- Live sea temperature & weather widget by SeaTempMap.com -->
<div class="seatempmap-widget" data-seatempmap-dest="santorini" data-units="c" data-theme="auto">
<a href="https://seatempmap.com/destinations/santorini" rel="noopener">Sea temperature in Santorini · SeaTempMap.com</a>
</div>
<script async src="https://seatempmap.com/widget/v1.js"></script>將其貼到您希望卡片顯示的任何位置。
常見問題解答
我如何將海水溫度小工具新增至我的網站？
請在上方選擇一個目的地，複製程式碼片段，並將其貼到您的頁面 HTML 中希望卡片顯示的任何位置 – 舉凡頁尾、側邊欄或文章內都可以。無需安裝任何東西，也不用建立帳號：它可以在 WordPress、Wix、Squarespace、Shopify 或手動編寫程式碼的網站上的任何 HTML 或嵌入區塊中運作。
這個小工具真的是免費的嗎？
是的 – 個人和商業網站皆可免費使用，無需註冊，無需 API 金鑰，也沒有流量上限。我們唯一的要求是請您保留卡片上小小的 SeaTempMap.com 連結 – 這個鳴謝就是讓小工具能維持免費的原因。
資料來源為何，更新頻率多高？
海水溫度來自 1 km 網格的 NASA 衛星資料 – 與您在我們世界地圖上看到的讀數完全相同。氣溫、天氣與 UV 指數則來自即時的全球資料來源，只要您的頁面保持開啟，卡片就會自動重新整理 – 您的訪客永遠能看到當前的狀況。
它會與我網站的設計搭配嗎？
卡片採用毛玻璃設計：它會透出後方的背景，並自動在深色與淺色文字之間切換，因此在任何顏色、相片或區塊上都能保持清晰易讀。如果您比較想固定外觀，可以將 data-theme 設定為 light 或 dark。
小工具會與我網站的樣式發生衝突嗎？
不會 – 卡片會在 Shadow DOM 內部渲染，這是一項能將其完全隔離的瀏覽器功能：您佈景主題的 CSS 無法意外破壞小工具，而小工具的樣式也不會外洩到您的頁面上。
它會以我訪客的語言顯示嗎？
是的 – 卡片會讀取您網站的語言，並自動以該語言顯示其標籤，共支援 30 種語言。法文網頁會得到法文卡片，德文網頁則顯示德文卡片；任何尚未支援的語言都會預設顯示英文。
小工具會拖慢我的網頁速度嗎？
不會 – 它只是一個小巧的指令碼（不到 20 kB，沒有任何依賴套件），會在您的內容之後非同步載入，外加一次微小的資料請求。萬一資料無法載入，卡片只會默默地停止顯示，絕不破壞您的網頁版面。
我可以顯示多個目的地嗎？
是的 – 每個目的地貼上一個程式碼片段，每張卡片都會獨立渲染，所以有兩家分店的飯店可以將兩者都顯示出來。該指令碼在每個網頁只需引入一次，但重複引入也不會造成任何危害。
目前提供哪些目的地？
涵蓋全球 174 個精選海灘和沿海城市 – 從地中海與大西洋，到加勒比海、東南亞及太平洋。請在上方清單中搜尋；如果找不到您需要的目的地，請發送電子郵件至 hello@seatempmap.com，我們會考慮將其加入。
它會使用 Cookie 或收集訪客資料嗎？
不會 – 小工具不會設定任何 Cookie，不會在您訪客的裝置上儲存任何內容，也不進行任何追蹤 – 絕對沒有任何個人資料。它只會擷取溫度資料，因此將它嵌入在任何地方都是安全的，且不會影響您的 Cookie 橫幅或隱私權政策。