返回博客列表

实时天气组件：天气预报、雷达图与风力图嵌入指南

在 Notion、Obsidian、Google Sites 或任意网站嵌入实时天气：15 天预报、城市天气面板、全国雷达拼图与动画风力图——实时 iframe，免费嵌入，无需 API key。

2026-09-13

天气是最典型的"实时"内容：超过一小时的预报就是民间传说。然而多数可嵌入的"天气组件"要么是付费 SDK，要么是静态图片。下面的组件是真实气象页面（国家气象局与可视化站点）的实时裁切，以沙箱 iframe 嵌入，每次查看都重新绘制。

15 天预报——规划未来两周

  • 15 天天气预报 · 嵌入：https://embed.widget.diy/FMAjysNS —— 两周展望含每日高低温与天气状况；裁成单列城市卡片就是侧栏卡片。
  • 上海天气面板 · 嵌入：https://embed.widget.diy/BXHydMhP —— 播报风格城市面板：实况加一周展望。

雷达拼图——现在雨在哪

风力图——气象学的浪漫一端

  • 风力图（ventusky） · 嵌入：https://embed.widget.diy/JRfvQDde —— 区域地图上的动画流线；做仪表盘背景很催眠，对船员、骑行者和无人机飞手则真的有用。
  • 阵风图（earth.nullschool.net） · 嵌入：https://embed.widget.diy/LcrMJ47x —— nullschool 地球仪裁到区域：出版级风力可视化，实时。

在 Notion 嵌入实时天气

  1. 打开组件详情页复制嵌入地址；
  2. Notion：/embed → 粘贴 → 调整大小；
  3. 预报在每次被查看时更新——无需 API key、无需 SDK、无需账号。

HTML 版本：

<iframe
  src="https://embed.widget.diy/FMAjysNS"
  width="600"
  height="400"
  frameborder="0"
  scrolling="no"
  loading="lazy"
></iframe>

地图要铺满 hero 横幅用 ?fit=cover；预报表格塞进窄栏用 ?fit=contain。

裁你自己的城市

以上每个组件都始于有人把天气网址粘进 widget.diy 并框住自己的城市。对你的本地预报页做同样的事——嵌入保持你的裁切、你的尺寸、实时。

常见问题

需要 API key 吗？ 不需要。组件嵌入的是公开页面本身，源站自己的数据干活。

雷达在 Notion 里会动吗？ 会——iframe 在 embed 源的沙箱里运行源页 JavaScript，动画包含在内。

能显示多个城市吗？ 一个城市一个组件；Notion 里用多栏排布即可。