我网站上的 Google 天气小部件 [英] Google weather widget on my website

问题描述

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

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

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

如果有人使用过谷歌天气小部件，请告诉我.

解决方案

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

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

注意事项:

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

.google-weather-place {宽度:计算(655px/2)；高度:计算(450px/2)；}.google-weather-crop {宽度:计算(655px/2)；高度:计算(450px/2)；溢出:隐藏；过渡:0.3s；位置:绝对；}.google-weather-crop:悬停{宽度:655px；高度:450px；}.google-天气{位置:相对；左:-180px；顶部:-180px；宽度:2560px；高度:5120px；变换:比例(0.5)；变换原点:180px 180px；过渡:0.3s；位置:绝对；}.google 天气:悬停 {变换:比例(1)；z-索引:1000；}

<h1>Google 天气嵌入</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>

<p>警告:谷歌搜索选项 <code>igu=1</code>注销用户，所以位置可能不太准确.</p>

I want to show weather on my website. I looked into all the weather widgets I could find online, none of them looked as cool as the one I see on google ( when i search weather for my city ) and I could not find any documentation on how to embed it in my website.

I'd like to know if there is any way I can plugin the exact google widget in my website. (the one I see when I search for weather )

There is another option of calling the service and building the whole widget, I looked at some of the API's available and it seems like a lot of work (yahoo API returns 30 different weather states. ) This is for educational purpose and so I don't intend to spend so much time on it.

If anyone has used the google weather widget, please let me know.

解决方案

I was able to embed Google's weather widget, using these tricks:

• The igu=1 query parameter allows to embed google in an iframe, but without the user signed in.
• Wrap the iframe in a div to crop it to just the weather widget.
• I added a zoom-on-hover transform effect, so that the widget takes up less space on the page.

Caveats:

• Because the user cannot be signed in, the weather location may be less precise.
• The cropping offsets might be browser dependant.
• It's probably not accessibility friendly.
• It would need to be adjusted to work correctly on mobile browsers.

.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>

这篇关于我网站上的 Google 天气小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！