Question

我想在我的网站上显示天气。我查看了我在网上找到的所有天气小部件，它们都没有像我在谷歌上看到的那样酷（当我为我的城市搜索天气时），我找不到任何关于如何将它嵌入我的网站的文档。

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

还有另一种选择，即调用服务并构建整个小部件，我查看了一些可用的API，看起来很多工作（雅虎API返回30种不同的天气状态。）这是出于教育目的而这样做我不打算花这么多时间。

如果有人使用了Google天气小部件，请告知我们。

Answer 1

Google天气信息框是搜索结果页的一部分，因此无法单独获取（AFAIK）。

可以从结果页面中提取信息。这可以在Web服务器上或在浏览器中完成（JavScript或扩展/插件）。应该可以将Google页面嵌入到另一个（<iframe>）中，然后删除除天气数据之外的所有内容。以下是get JQuery和hide everything except天气框的小型JavaScript：

var script = document.createElement('script');script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(script);
$('#wob_wc').show().parentsUntil('body').andSelf().siblings().hide();

这两行可以在JavaScript控制台中运行（在Firefox中测试）。该框与顶部和左侧页边缘略有偏移。

这两行可以用作书签（在当前页面上运行上述行的链接），但是，我可以不将其带到工作尽管试图wait until JQuery is loaded：

javascript:(function(){
  var script=document.createElement('script');
  script.src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js";
  document.getElementsByTagName('head')[0].appendChild(script);

function defer() {
    if (window.jQuery)
        method();
    else
        setTimeout(function() { defer(method) }, 50);
}

function method(){
$('#wob_wc').show().parentsUntil('body').andSelf().siblings().hide();
}

defer();
})();

Answer 2

使用以下技巧，我能够嵌入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>

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

2 个答案: