Kapar's Note: 在網頁中加入 Google 提供的動態天氣預報資訊

幫客戶製作網站的網頁時, 客戶提出想在網頁中加入及時的天氣預報資訊.搜尋網路上有提供相當多的相關資訊, 但是一直都不是很簡潔的處理方式.

有的是透過 Yahoo 提供的 API, 有的是透過 Google 提供的 API, 由於想要的是最簡潔的方式, 可以很單純的將現在的溫度跟天候狀態顯示出來,以及未來三天的預測. 所以選用了 Google 的天氣 API. 另外, 為了要讓天氣顯示美美的, 所以也加上了 jQuery 的 plugin, fisheye dock menu

(http://blog.jquery.com/2007/05/09/fisheye-dock-menu/) 來當作美化介面使用. 這一個 plugin 除了可以使用來凸顯介面, 也可以當作選單使用, 就像你在使用 Apple 的介面一樣, 讓你的網站看起來不一樣, 有興趣的自行參考該網站.

Google 提供天氣的資訊是使用 xml 的方式傳遞資訊, 所以在我開發的過程中使用了 php 提供解析 xml 的函數 simplexml_load_file(). 這樣就可以方便將每一個 xml 現在跟預報中的資訊都擷取出來使用.

要使用 Google 提供的 xml 檔案, 就要先了解他的 xml 結構, 要使用 Google weather API 請到以下的網址 http://www.google.com/ig/api?weather=taipei 參數 weather=taipei 這裡請填你要查詢的地區, 以下是抓取台北(taipei), 的地區天氣資訊所傳回的 xml 檔案.

<xml_api_reply version="1">
<weather module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0">
<forecast_information>
<city data="taipei"/>
<postal_code data="taipei"/>
<latitude_e6 data=""/>
<longitude_e6 data=""/>
<forecast_date data="2012-06-10"/>
<current_date_time data="2012-06-11 04:30:00 +0000"/>
<unit_system data="SI"/>
</forecast_information>
<current_conditions>
<condition data="多雲時陰"/>
<temp_f data="86"/>
<temp_c data="30"/>
<humidity data="濕度： 70%"/>
<icon data="/ig/images/weather/mostly_cloudy.gif"/>
<wind_condition data="風向：西、風速：21 公里/小時"/>
</current_conditions>
<forecast_conditions>
<day_of_week data="週日"/>
<low data="27"/>
<high data="34"/>
<icon data="/ig/images/weather/thunderstorm.gif"/>
<condition data="雷陣雨"/>
</forecast_conditions>
<forecast_conditions>
<day_of_week data="週一"/>
<low data="27"/>
<high data="34"/>
<icon data="/ig/images/weather/thunderstorm.gif"/>
<condition data="雷陣雨"/>
</forecast_conditions>
<forecast_conditions>
<day_of_week data="週二"/>
<low data="25"/>
<high data="35"/>
<icon data="/ig/images/weather/chance_of_storm.gif"/>
<condition data="有暴風雨"/>
</forecast_conditions>
<forecast_conditions>
<day_of_week data="週三"/>
<low data="22"/>
<high data="27"/>
<icon data="/ig/images/weather/chance_of_storm.gif"/>
<condition data="有暴風雨"/>
</forecast_conditions>
</weather>
</xml_api_reply>

看起來清清爽爽, 很清楚那些是現在天氣, 那些是天氣預測, 並且也標示出了天氣的狀況. 不過不用太高興, 因為這是 Google weather API 依照瀏覽器語系來判別你所使用的語系(或是你的 IP 所在地區)顯示出來的資料, 如果你的主機IP是在不同的地區, 抓出來的可能就是英文的資料, 看不到中文. 我遇到的狀況就是這樣, 可能還要查詢一下資料, 才可以釐清問題點. 到時候我再補上.

知道 xml 的格式後再來就是針對 xml 開始抓取所要的資料, 以下是 php 的程式碼

$w = $_GET['w'];

$xml = simplexml_load_file('http://www.google.com/ig/api?weather='.$w);

$information = $xml->xpath("/xml_api_reply/weather/forecast_information");

$current = $xml->xpath("/xml_api_reply/weather/current_conditions");

$forecast_list = $xml->xpath("/xml_api_reply/weather/forecast_conditions");

$msg = '';

$w 取得地區傳入的參數, 用在 http://www.google.com/ig/api?weather= 這樣就可以依照個人需求填入不同的地區.

$xml 就是取得 Google API 傳回的 xml 檔案, 並且物件化.

$information 將 $xml 物件中指定的 xpath 設定在 forecast_information

$current 將 $xml 物件中指定的 xpath 設定在 current_conditions

$forecast_list 將 $xml 物件中指定的 xpath 設定在 forecast_conditions

$msg 用來將標示好的 html 跟天氣物件資料內容傳出給網頁使用

接著就是開始將物件資料, 玩填填看的遊戲了, 把想要使用的資料物件, 放置到想要顯示的地方.

$i=1;

foreach ($forecast_list as $forecast) :

$iconData2 = str_replace("/ig/images/weather/", "/png/", $forecast->icon['data']);

$iconData2 = str_replace(".gif", ".png", $iconData2);

if($i==1){

$msg .='<a class="dock-item" href="#"><img src="http://www.hostbank.com.tw/uli/w'.$iconData2.'" alt="'.$forecast->day_of_week['data'].'">';

$msg .='<span><strong>Today</strong><br />'.round(($forecast->low['data']-32)*(5/9)).' - '.round(($forecast->high['data']-32)*(5/9)).'° C</span></a>';

} else {

$msg .='<a class="dock-item" href="#"><img src="http://www.hostbank.com.tw/uli/w'.$iconData2.'" alt="'.$forecast->day_of_week['data'].'">';

$msg .='<span><strong>'.$forecast->day_of_week['data'].'</strong><br />'.round(($forecast->low['data']-32)*(5/9)).' - '.round(($forecast->high['data']-32)*(5/9)).'° C</span></a>';

}

$i++;

endforeach;

在這邊我設定了一個計數器 $i, 因為 xml 中傳回的 forecast_list 中包含了查詢當天的天氣資料, 所以我就直接把他使用在我要顯示為今天資料的欄位上. 並將他設定為 Today. 而不使用 $current 這個物件中的資料.

還有, 氣溫的數值我要使用攝氏 °C , 所以變成要將華氏的溫度換算.

另外, 因為 Google 提供的天氣圖是醜醜的, 為了配合網頁的視覺效果, 我就另外抓了網路上面比較好看的天氣圖示來取代. 所以在程式碼中, 我要將原本的圖示路徑變更到自己主機所設定的圖示路徑. 使用了 str_replace 來將路徑變更. 還有抓來的圖檔格式因為是 png, 所以也要將原本圖示的 gif 附檔名一併取代掉. 就只有保留圖示的檔案名稱.

以下是 Google weather API 原本提供的天氣圖示

當然啦, 你一定以為這樣就搞定了, 錯啦!! 網路上提供美美的天氣圖示, 檔案名稱都是以數字來命名, 所以, 要花點心思將數字命名的圖片更正為 Google API 所提供的圖示檔案名稱. 這樣才可以套用, 因此我又花了一點時間一個一個比對圖示名稱,將Google weather API 中所有的天氣狀況名稱圖示對應上去.

想知道 Google weather API 中每個天氣狀況有哪些名稱? 網路上有人將他列表出來請自行參考 http://www.webdesignlondon-tristar.co.uk/goodies/all-google-weather-api-conditions

以下是完整的 weather.php 程式碼 :

<?php

$w = $_GET['w'];

$xml = simplexml_load_file('http://www.google.com/ig/api?weather='.$w);

$information = $xml->xpath("/xml_api_reply/weather/forecast_information");

$current = $xml->xpath("/xml_api_reply/weather/current_conditions");

$forecast_list = $xml->xpath("/xml_api_reply/weather/forecast_conditions");

$msg ='';

//$msg .='<a class="dock-item" href="#"><img src="http://www.google.com'.$current[0]->icon['data'].'" alt="Today"><span><strong>Today</strong><br />'.$current[0]->temp_c['data'].'° C</span></a>';

$i=1;

foreach ($forecast_list as $forecast) :

$iconData2 = str_replace("/ig/images/weather/", "/png/", $forecast->icon['data']);

$iconData2 = str_replace(".gif", ".png", $iconData2);

if($i==1){

$msg .='<a class="dock-item" href="#"><img src="http://www.hostbank.com.tw/uli/w'.$iconData2.'" alt="'.$forecast->day_of_week['data'].'">';

$msg .='<span><strong>Today</strong><br />'.round(($forecast->low['data']-32)*(5/9)).' - '.round(($forecast->high['data']-32)*(5/9)).'° C</span></a>';

} else {

$msg .='<a class="dock-item" href="#"><img src="http://www.hostbank.com.tw/uli/w'.$iconData2.'" alt="'.$forecast->day_of_week['data'].'">';

$msg .='<span><strong>'.$forecast->day_of_week['data'].'</strong><br />'.round(($forecast->low['data']-32)*(5/9)).' - '.round(($forecast->high['data']-32)*(5/9)).'° C</span></a>';

}

$i++;

endforeach;

echo $msg;

這樣抓出來的版面有點醜, 所以還要經過加工, 這樣才可以產生漂亮可以使用的畫面. 我使用 jQuery 的 plugin fisheye dock menu 來美化頁面. 在要顯示的頁面中加入以下的語法, 引用 jQuery 跟 plugin 還有 css 檔.

並在要顯示天氣的地方加入 <div> 標籤, 並撰寫 script

$(document).ready(

function()

{

$('div#weather').load('weather.php?w=taipei',function(){

$('#dock').Fisheye(

{

maxWidth: 46,

items: 'a',

itemsText: 'span',

container: '.dock-container',

itemWidth: 46,

proximity: 90,

halign : 'center'

});

</script>

搞定後美美的頁面就完成了.

Kapar's Note

網頁

2012年6月13日星期三

在網頁中加入 Google 提供的動態天氣預報資訊

沒有留言:

張貼留言

網頁

2012年6月13日 星期三

在網頁中加入 Google 提供的動態天氣預報資訊

沒有留言:

張貼留言

2012年6月13日星期三