免费网站天气与海水温度小组件
只需不到一分钟，即可在您的网站上免费添加海水温度和天气小组件。支持全球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 横幅提示或隐私政策。