石頭的coding之路

目前可以撈到天氣資訊的平台有:

1. Yahoo weather API:
   每2~3小時更新一次天氣資料

   https://developer.yahoo.com/weather/

2. 氣象資料開放平台:
   每15~30分更新一次天氣資料

   http://opendata.cwb.gov.tw/index;jsessionid=8C3566791736071759401AAEB07A2455

這次我是選擇使用Yahoo weather API

搭配使用JQuery和HTML,Css前端來實現

    有三個主要呈現的資訊

1. 一周每日天氣(圖片,文字)
2. 哪個縣市
3. 平均溫度

最核心的js程式 WeatherScript.JS

//每一秒跑一張圖 大於目前城鎮數量從0開始算
function ShowWaeather() {
    if (i>=cityLenght) {
        i = 0;
    }
    $("#todayWeather").empty();
    $("#otherdayWeather").empty();
    SetWeeaTher(word[0].City[i].ID);
    setTimeout("ShowWaeather()", 5000);
};
ShowWaeather();

var word = [
   {
	   Area: 'TW', City: [
		  { ID: '20070568',CName: '台北', EName: 'Taipei' },
	      { ID: '2347336', CName: '宜蘭', EName: 'Yilan' },
		  { ID: '2306206', CName: '嘉義', EName: 'Chiayi' },
		  { ID: '2306190', CName: '台東', EName: 'Taitung' },
		  { ID: '2306181', CName: '台中', EName: 'Taichung' }
	   ]
   }
];

每五秒會一個縣市(會從cityData.js中讀取word陣列)

var cityLenght = 0;//多少城市
var i = 0;
//設置天氣圖
function SetWeeaTher(woeid) {
    //將locationQuery不要轉換
    var locationQuery = escape("select * from weather.forecast where woeid ='" + woeid + "' and u='c'");
    $.getJSON("https://query.yahooapis.com/v1/public/yql?q=" + locationQuery + "&format=json",
        function (data) {
            var forcast = data.query.results.channel.item.forecast;//本周天氣
            var cityName = word[0].City[i].CName//城市
			$("#CName").text(cityName);
			Setforcast(forcast);
			i++;
        });
}

再去呼叫 https://query.yahooapis.com/v1/public/yql

    其中要帶兩個主要參數

1. q:查詢資料的語句
2. format:回傳資料型態:JSON或XML

之後會將資料傳送回來我們在依照他給的資料來綁定

2019/03/17 更新

• Yahoo weather API: 每2~3小時更新一次天氣資料 https://developer.yahoo.com/weather/

我發現Yahoo weather API 轉移了

所以我改成使用

• 氣象資料開放平台: 每15~30分更新一次天氣資料http://opendata.cwb.gov.tw/index;jsessionid=8C3566791736071759401AAEB07A2455

使用前須先申請 授權碼 並將授權碼填入 Authorization 參數中

var parameters = {
	Authorization : "{替換成自己的ID}", //替換成自己的ID
	format:"JSON",
	locationName: CName,
	elementName:"T,RH,Wx",
	sort:"time"
};

因為氣象資料開放平台有提供濕度 所以我將他呈現在當天的資訊上

天氣參數對照表

天氣API文件

原始碼:https://github.com/isdaniel/Yahoo-WeatherAPI

如果本文對您幫助很大，可街口支付斗內鼓勵石頭^^