我网站上的 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&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&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屋!