利用PRototype和GOOGLE的weather api做天氣預報
想拿prototype練練手，就用prototype做個天氣預報吧。
Google Weather API 只支持美國地區使用郵政編碼進行查詢,例如:
http://www.google.com/ig/api?hl=zh-cn&weather=94043
(94043 為 山景城, 美國加州 的郵政編碼)
而除了美國以外的地區需要使用經緯度坐標作為參數才能執行 Google Weather API, 例如:
http://www.google.com/ig/api?hl=zh-cn&weather=,,,30670000,104019996
(30670000,104019996 為 成都, 中國大陸 的經緯度坐標)
要其它地區的經緯度坐標,可以通過 Google API 提供的國家代碼列表及相應的城市經緯度坐標列表可以查詢到,以下是 Google API 提供的查詢參數:
http://www.google.com/ig/countries?output=xml&hl=zh-cn
asp演示:http://www.survivalescaperooms.com/tools/tianqiyubao.asp
(查詢 Google 所支持的所有國家的代碼,并以 zh-cn 簡體中文顯示)
http://www.google.com/ig/cities?output=xml&hl=zh-cn&country=cn
：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
</head>
<script language="javascript" src="prototype.js"></script>
<script language="Javascript">
//取得中國所有的城市
function getCity()
{
var url = "var cityPara = {method:"get" ,
parameters:"output=xml&hl=zh-cn&country=cn" ,
onComplete:showCityRespose
};
var cityRequest = new Ajax.Request( url , cityPara);
}
function showCityRespose(originalRequest)
{
cityInfo = originalRequest.responseXML;
cityNodes = cityInfo.getElementsByTagName("city");
for(var i=0;i<cityNodes.length;i++){
var city = cityNodes[i];
var cityName = getData( city , "name");
var latitude = getData( city ,"latitude_e6");
var longitude= getData( city ,"longitude_e6");
var option =document.createElement("option");
$("city").options.add(option);
option.innerText = cityName;
option.value=",,,"+latitude+","+longitude;
}
}
function forecast(city)
{
$("result").innerHTML = "請稍等";
var url = "var para = {method:"get" ,
parameters:"hl=zh-cn&weather="+city ,
onComplete:showResult
};
var forecastRequest = new Ajax.Request(url , para);
}
//顯示預報結果
function showResult(originalRequest)
{
$("result").innerHTML = "";
resultXML = originalRequest.responseXML;
forecastNodes = resultXML.getElementsByTagName("forecast_conditions");
for(i=0;i<forecastNodes.length;i++){
var oneNode = forecastNodes[i];
var weekday = getData( oneNode , "day_of_week");
var low = getData( oneNode , "low");
var high = getData( oneNode , "high");
var icon = getData( oneNode , "icon");
var result = document.createElement("div");
result.appendChild(document.createTextNode(weekday));
result.appendChild(document.createElement("br"));
result.appendChild(document.createTextNode("最低溫度"+low));
result.appendChild(document.createElement("br"));
result.appendChild(document.createTextNode("最高溫度"+high));
result.appendChild(document.createElement("br"));
var image = document.createElement("img");
image.setAttribute("src" , ");
result.appendChild(image);
$("result").appendChild(result);
}
}
//取得數據值
function getData(parentNode , nodeName)
{
return parentNode.getElementsByTagName(nodeName)[0].getAttribute("data");
}
</script>
<body onLoad="getCity()">
<div id="selectcity">
<form name="form1" method="post" action="">
<select name="city" id="city" onChange="forecast(this.value)">
<option value="">選擇城市</option>
</select>
</form>
</div>
<div id="result">
</div>
</body>
</html>
ASP演示:http://www.survivalescaperooms.com/tools/tianqiyubao.asp
注意這段代碼在IE下可以使用，在IE里xmlhttpREQUEST可以選擇允許跨域。
在FF下，就不能使用了:(
解決辦法：你可以先用php讀下來GOOGLE提供的數據，再用XML形式提供給這個程序，就可以啦。
新聞熱點
疑難解答
