雅虎天气 api JSON 图标
Yahoo Weather api JSON Icon
所以我想知道是否可以使用当前的 Yahoo Weather API 显示比 JSON 响应在 CDATA 中发回的图像更好的图像?
JSON:
使用 api 我得到 JSON 响应作为示例 HERE。
当前图片:
目前风很大,我从 API Json 格式的 CDATA 中获取的图像如下所示:IMAGE
我想展示的图片:
我想要的是您可以在右侧导航中看到的精美图片:Yahoo
这可能吗?或者 json CDATA 中的图像是我唯一可以使用的选项吗?
当前代码(有效):
var queryURL = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22anglesey%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
$.getJSON(queryURL, function (data) {
var results = data.query.results
var firstResult = results.channel.item.condition
var link = results.channel.image.link
var img_link_url = results.channel.image.url
var name = results.channel.location.city
console.log(firstResult);console.log(link);console.log(img_link_url);
var description = results.channel.item.description
console.log(description);
var regex = /img.*?src=("|')(.*?)/i;
var match = description.match(regex)[2];
console.log(match);
var location = firstResult.location // not returned in response
var temp = firstResult.temp
var text = firstResult.text
var cels = (temp - 32) * (5 / 9);
// if text = "party cloudy -> class = pcloudy || if text = "cloudy -> class = cloudy || sunny, rainy"
// or use code
//https://developer.yahoo.com/weather/
$('#output').append('<p><span>Weather in </span> ' + name + ' <img src=' + match + '> ' + temp + 'F° / ' + Math.floor(cels) + ' C°</p>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
我已经解决了这个问题,方法是使用从 Yahoo API 返回的 code 并将图像分配给特定代码:
你可以从这里下载图片,有很多选项可供选择,在我的例子中我选择了"mono flat":LINK
也可以在此处找到 Yahoo 代码和说明:LINK
然后代码:
note that you wont see the images but it works on my side.
var queryURL = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22anglesey%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
$.getJSON(queryURL, function (data) {
var results = data.query.results
var firstResult = results.channel.item.condition
var link = results.channel.image.link
var img_link_url = results.channel.image.url
var name = results.channel.location.city
console.log(firstResult);
console.log(link);
console.log(img_link_url);
var description = results.channel.item.description
console.log(description);
var regex = /img.*?src=("|')(.*?)/i;
var match = description.match(regex)[2];
console.log(match);
var location = firstResult.location // not returned in response
var temp = firstResult.temp
var text = firstResult.text
var code = firstResult.code
var img
switch(code) {
case "0":
img = "/images/mono-flat/0.png";
break;
case "1":
img = "/images/mono-flat/1.png";
break;
case "2":
img = "/images/mono-flat/2.png";
break;
case "3":
img = "/images/mono-flat/3.png";
break;
case "4":
img = "/images/mono-flat/4.png";
break;
case "5":
img = "/images/mono-flat/5.png";
break;
case "6":
img = "/images/mono-flat/6.png";
break;
case "7":
img = "/images/mono-flat/7.png";
break;
case "8":
img = "/images/mono-flat/8.png";
break;
case "9":
img = "/images/mono-flat/9.png";
break;
case "10":
img = "/images/mono-flat/10.png";
break;
case "11":
img = "/images/mono-flat/11.png";
break;
case "12":
img = "/images/mono-flat/12.png";
break;
case "13":
img = "/images/mono-flat/13.png";
break;
case "14":
img = "/images/mono-flat/14.png";
break;
case "15":
img = "/images/mono-flat/15.png";
break;
case "16":
img = "/images/mono-flat/16.png";
break;
case "17":
img = "/images/mono-flat/17.png";
break;
case "18":
img = "/images/mono-flat/18.png";
break;
case "19":
img = "/images/mono-flat/19.png";
break;
case "20":
img = "/images/mono-flat/20.png";
break;
case "21":
img = "/images/mono-flat/21.png";
break;
case "22":
img = "/images/mono-flat/22.png";
break;
case "23":
img = "/images/mono-flat/23.png";
break;
case "24":
img = "/images/mono-flat/24.png";
break;
case "25":
img = "/images/mono-flat/25.png";
break;
case "26":
img = "/images/mono-flat/26.png";
break;
case "27":
img = "/images/mono-flat/27.png";
break;
case "28":
img = "/images/mono-flat/28.png";
break;
case "29":
img = "/images/mono-flat/29.png";
break;
case "30":
img = "/images/mono-flat/30.png";
break;
case "31":
img = "/images/mono-flat/31.png";
break;
case "32":
img = "/images/mono-flat/32.png";
break;
case "33":
img = "/images/mono-flat/33.png";
break;
case "34":
img = "/images/mono-flat/34.png";
break;
case "35":
img = "/images/mono-flat/35.png";
break;
case "36":
img = "/images/mono-flat/36.png";
break;
case "37":
img = "/images/mono-flat/37.png";
break;
case "38":
img = "/images/mono-flat/38.png";
break;
case "39":
img = "/images/mono-flat/39.png";
break;
case "40":
img = "/images/mono-flat/40.png";
break;
case "41":
img = "/images/mono-flat/41.png";
break;
case "42":
img = "/images/mono-flat/42.png";
break;
case "43":
img = "/images/mono-flat/43.png";
break;
case "44":
img = "/images/mono-flat/44.png";
break;
case "45":
img = "/images/mono-flat/45.png";
break;
case "46":
img = "/images/mono-flat/46.png";
break;
case "47":
img = "/images/mono-flat/47.png";
break;
default:
img = "/images/mono-flat/na.png";
}
var cels = (temp - 32) * (5 / 9);
$(document).ready(function() {
$('#output').append('<p><span>Weather in </span> ' + name + ' <img width="32px" src=' + img + '> ' + temp + 'F° / ' + Math.floor(cels) + ' C°</p>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
所以我想知道是否可以使用当前的 Yahoo Weather API 显示比 JSON 响应在 CDATA 中发回的图像更好的图像?
JSON:
使用 api 我得到 JSON 响应作为示例 HERE。
当前图片:
目前风很大,我从 API Json 格式的 CDATA 中获取的图像如下所示:IMAGE
我想展示的图片:
我想要的是您可以在右侧导航中看到的精美图片:Yahoo
这可能吗?或者 json CDATA 中的图像是我唯一可以使用的选项吗?
当前代码(有效):
var queryURL = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22anglesey%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
$.getJSON(queryURL, function (data) {
var results = data.query.results
var firstResult = results.channel.item.condition
var link = results.channel.image.link
var img_link_url = results.channel.image.url
var name = results.channel.location.city
console.log(firstResult);console.log(link);console.log(img_link_url);
var description = results.channel.item.description
console.log(description);
var regex = /img.*?src=("|')(.*?)/i;
var match = description.match(regex)[2];
console.log(match);
var location = firstResult.location // not returned in response
var temp = firstResult.temp
var text = firstResult.text
var cels = (temp - 32) * (5 / 9);
// if text = "party cloudy -> class = pcloudy || if text = "cloudy -> class = cloudy || sunny, rainy"
// or use code
//https://developer.yahoo.com/weather/
$('#output').append('<p><span>Weather in </span> ' + name + ' <img src=' + match + '> ' + temp + 'F° / ' + Math.floor(cels) + ' C°</p>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
我已经解决了这个问题,方法是使用从 Yahoo API 返回的 code 并将图像分配给特定代码:
你可以从这里下载图片,有很多选项可供选择,在我的例子中我选择了"mono flat":LINK
也可以在此处找到 Yahoo 代码和说明:LINK
然后代码:
note that you wont see the images but it works on my side.
var queryURL = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22anglesey%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
$.getJSON(queryURL, function (data) {
var results = data.query.results
var firstResult = results.channel.item.condition
var link = results.channel.image.link
var img_link_url = results.channel.image.url
var name = results.channel.location.city
console.log(firstResult);
console.log(link);
console.log(img_link_url);
var description = results.channel.item.description
console.log(description);
var regex = /img.*?src=("|')(.*?)/i;
var match = description.match(regex)[2];
console.log(match);
var location = firstResult.location // not returned in response
var temp = firstResult.temp
var text = firstResult.text
var code = firstResult.code
var img
switch(code) {
case "0":
img = "/images/mono-flat/0.png";
break;
case "1":
img = "/images/mono-flat/1.png";
break;
case "2":
img = "/images/mono-flat/2.png";
break;
case "3":
img = "/images/mono-flat/3.png";
break;
case "4":
img = "/images/mono-flat/4.png";
break;
case "5":
img = "/images/mono-flat/5.png";
break;
case "6":
img = "/images/mono-flat/6.png";
break;
case "7":
img = "/images/mono-flat/7.png";
break;
case "8":
img = "/images/mono-flat/8.png";
break;
case "9":
img = "/images/mono-flat/9.png";
break;
case "10":
img = "/images/mono-flat/10.png";
break;
case "11":
img = "/images/mono-flat/11.png";
break;
case "12":
img = "/images/mono-flat/12.png";
break;
case "13":
img = "/images/mono-flat/13.png";
break;
case "14":
img = "/images/mono-flat/14.png";
break;
case "15":
img = "/images/mono-flat/15.png";
break;
case "16":
img = "/images/mono-flat/16.png";
break;
case "17":
img = "/images/mono-flat/17.png";
break;
case "18":
img = "/images/mono-flat/18.png";
break;
case "19":
img = "/images/mono-flat/19.png";
break;
case "20":
img = "/images/mono-flat/20.png";
break;
case "21":
img = "/images/mono-flat/21.png";
break;
case "22":
img = "/images/mono-flat/22.png";
break;
case "23":
img = "/images/mono-flat/23.png";
break;
case "24":
img = "/images/mono-flat/24.png";
break;
case "25":
img = "/images/mono-flat/25.png";
break;
case "26":
img = "/images/mono-flat/26.png";
break;
case "27":
img = "/images/mono-flat/27.png";
break;
case "28":
img = "/images/mono-flat/28.png";
break;
case "29":
img = "/images/mono-flat/29.png";
break;
case "30":
img = "/images/mono-flat/30.png";
break;
case "31":
img = "/images/mono-flat/31.png";
break;
case "32":
img = "/images/mono-flat/32.png";
break;
case "33":
img = "/images/mono-flat/33.png";
break;
case "34":
img = "/images/mono-flat/34.png";
break;
case "35":
img = "/images/mono-flat/35.png";
break;
case "36":
img = "/images/mono-flat/36.png";
break;
case "37":
img = "/images/mono-flat/37.png";
break;
case "38":
img = "/images/mono-flat/38.png";
break;
case "39":
img = "/images/mono-flat/39.png";
break;
case "40":
img = "/images/mono-flat/40.png";
break;
case "41":
img = "/images/mono-flat/41.png";
break;
case "42":
img = "/images/mono-flat/42.png";
break;
case "43":
img = "/images/mono-flat/43.png";
break;
case "44":
img = "/images/mono-flat/44.png";
break;
case "45":
img = "/images/mono-flat/45.png";
break;
case "46":
img = "/images/mono-flat/46.png";
break;
case "47":
img = "/images/mono-flat/47.png";
break;
default:
img = "/images/mono-flat/na.png";
}
var cels = (temp - 32) * (5 / 9);
$(document).ready(function() {
$('#output').append('<p><span>Weather in </span> ' + name + ' <img width="32px" src=' + img + '> ' + temp + 'F° / ' + Math.floor(cels) + ' C°</p>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>