javascript - 我网站上的 Google 天气小部件

Question

我想在我的网站上显示天气。我查看了我能在网上找到的所有天气小部件，没有一个看起来像我在谷歌上看到的那样酷(当我搜索我所在城市的天气时)，而且我找不到任何关于如何将它嵌入我的网站的文档。

我想知道是否有任何方法可以在我的网站中插入确切的 google 小部件。 (我搜索天气时看到的那个)

还有另一种调用服务和构建整个小部件的选项，我查看了一些可用的 API，似乎需要做很多工作(yahoo API 返回 30 种不同的天气状态。)这是出于教育目的，所以我不打算在这上面花太多时间。

如果有人使用过 google weather widget，请告诉我。

Answer 1

我能够使用这些技巧嵌入 Google 的天气小部件:

• igu=1 查询参数允许将 google 嵌入 iframe，但无需用户登录。
• 将 iframe 包裹在 div 中以将其裁剪为仅天气小部件。
• 我添加了悬停时缩放变换效果，因此小部件在页面上占用的空间更少。

注意事项:

• 由于用户无法登录，天气位置可能不太准确。
• 裁剪偏移量可能取决于浏览器。
• 它可能不是可访问性友好的。
• 它需要进行调整才能在移动浏览器上正常工作。

.google-weather-place {
    width: calc(655px/2); height: calc(450px/2);
}
.google-weather-crop {
    width: calc(655px/2); height: calc(450px/2);
    overflow: hidden;
    transition: 0.3s;
    position: absolute;
}
.google-weather-crop:hover {
    width: 655px; height: 450px;
}
.google-weather {
    position: relative;
    left: -180px; top: -180px;
    width: 2560px; height: 5120px;
    transform: scale(0.5);
    transform-origin: 180px 180px;
    transition: 0.3s;
    position: absolute;
}
.google-weather:hover {
    transform: scale(1);
    z-index: 1000;
}

<h1>Google Weather Embed</h1>
<div class="google-weather-place">
<div class="google-weather-crop">
<iframe class="google-weather" src="https://www.google.com/search?igu=1&amp;q=weather">
</iframe>
</div>
</div>
<p>Caveat: The google search option <code>igu=1</code> logs out the user,
so the location may be less accurate.</p>