|  | 客户端路径
在 Local Weather Mapplet 的示例中，两个单选按钮确定执行哪个行为路径：一个表示在客户端执行，另外一个表示主要在服务器端执行。在本节中，将实现客户端路径，在 JavaScript 中读取 Yahoo Weather RSS，并完全显示它。
调用 Yahoo RSS Weather 服务
客户端路径中的第一步是通过调用 fetchYahooRss() 来调用 Yahoo RSS Weather 服务，如清单 9 所示。
清单 9. fetchYahooRss()
function fetchYahooRss(zipcode, units) {
var yahooWeatherRssUrl = createYahooRssUrl(zipcode, units);
_IG_FetchXmlContent (yahooWeatherRssUrl, onYahooWeatherRssResult);
}
function createYahooRssUrl(zipcode, units) {
return 'http://weather.yahooapis.com/forecastrss?p=' + zipcode + '&u='
+ units;
}
|
fetchYahooRss() 调用 createYahooRssUrl，传递邮编和单位表示，创建 Yahoo! Weather RSS 提要的 URL。然后，使用 Google Maps 中的 _IG_FetchXmlContent 函数异步读取该 URL 的结果，提供 onYahooWeatherRssResult 作为回调函数。
为了查看 Yahoo! Weather RSS 提要的示例结果，在浏览器中访问 http://weather.yahooapis.com/forecastrss?p=10016&u=f 查看页面源代码，它包含结构如清单 10 所示的 XML。
清单 10. Yahoo! Weather RSS 提要的示例结果
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<rss version="2.0" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0"
xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<channel>
<title>Yahoo! Weather - New York, NY</title>
<link>http://us.rd.yahoo.com/dailynews/rss/weather/New_York__
NY/*http://weather.yahoo.com/forecast/10016_f.html</link>
<description>Yahoo! Weather for New York, NY</description>
<language>en-us</language>
<lastBuildDate>Sun, 05 Oct 2008 7:51 pm EDT</lastBuildDate>
<ttl>60</ttl>
<yweather:location city="New York" region="NY" country="US"/>
<yweather:units temperature="F" distance="mi" pressure="in" speed="mph"/>
<yweather:wind chill="56" direction="60" speed="3" />
<yweather:atmosphere humidity="90" visibility="6" pressure="30.28"
rising="1" />
<yweather:astronomy sunrise="6:57 am" sunset="6:31 pm"/>
<image>
<title>Yahoo! Weather</title>
<width>142</width>
<height>18</height>
<link>http://weather.yahoo.com</link>
<url>http://l.yimg.com/us.yimg.com/i/us/nws/th/main_142b.gif</url>
</image>
<item>
<title>Conditions for New York, NY at 7:51 pm EDT</title>
<geo:lat>40.67</geo:lat>
<geo:long>-73.94</geo:long>
<link>http://us.rd.yahoo.com/dailynews/rss/weather/New_York__
NY/*http://weather.yahoo.com/forecast/10016_f.html</link>
<pubDate>Sun, 05 Oct 2008 7:51 pm EDT</pubDate>
<yweather:condition text="Fair" code="33" temp="56"
date="Sun, 05 Oct 2008 7:51 pm EDT" />
<description><![CDATA[
<img src="http://l.yimg.com/us.yimg.com/i/us/we/52/33.gif"/><br />
<b>Current Conditions:</b><br />
Fair, 56 F<BR />
<BR /><b>Forecast:</b><BR />
Sun - Partly Cloudy. High: 64 Low: 51<br />
Mon - Partly Cloudy. High: 57 Low: 43<br />
<br />
<a href="http://us.rd.yahoo.com/dailynews/rss/weather/New_York__
NY/*http://weather.yahoo.com/forecast/USNY0996_f.html">Full Forecast at Yahoo!
Weather</a><BR/>
(provided by The Weather Channel)<br/>
]]></description>
<yweather:forecast day="Sun" date="5 Oct 2008" low="51" high="64"
text="Partly Cloudy" code="29" />
<yweather:forecast day="Mon" date="6 Oct 2008" low="43" high="57"
text="Partly Cloudy" code="30" />
<guid isPermaLink="false">10016_2008_10_05_19_51_EDT</guid>
</item>
</channel>
</rss><!-- api1.weather.ac4.yahoo.com compressed/chunked Sun Oct
5 17:23:56 PDT 2008 -->
|
清单 10 包含以 RSS 格式表示的大量信息，包含一个 <channel> 元素，以及它的 <item> 子元素。有些本地天气信息放在 <channel> 层，有些信息放在 <item> 层。当在本文后面用 XSLT 转换这些数据时，数据的结构将变得更重要，但是，当前重要的元素是 <channel> 元素的 <title>，以及 <item> 元素的 <description>。
使用 Yahoo RSS 结果
URL 完全加载后，该 RSS 结果则作为一个 DOM 对象传递给回调函数 onYahooWeatherRssResult，如清单 11 所示。
清单 11. onYahooWeatherRssResult()
function onYahooWeatherRssResult(xml) {
var item = xml.getElementsByTagName('item')[0];
var description = item.getElementsByTagName('description')[0];
document.getElementById("message").innerHTML = description.textContent;
}
|
onYahooWeatherRssResult() 在 XML 中查找 <item> 元素以及它的 <description> 元素。<description> 元素是一个方便的 HTML 呈现，用来显示天气提要中的某些信息，因此，在 CDATA 元素中对它的内容进行打包，如清单 12 所示。
清单 12. Yahoo! Weather RSS 提要结果 XML 中的 <description> 元素
<description><![CDATA[
<img src="http://l.yimg.com/us.yimg.com/i/us/we/52/33.gif"/><br />
<b>Current Conditions:</b><br />
Fair, 56 F<BR />
<BR /><b>Forecast:</b><BR />
Sun - Partly Cloudy. High: 64 Low: 51<br />
Mon - Partly Cloudy. High: 57 Low: 43<br />
<br />
<a href="http://us.rd.yahoo.com/dailynews/rss/weather/New_York__
NY/*http://weather.yahoo.com/forecast/USNY0996_f.html">Full Forecast at
Yahoo! Weather</a><BR/>
(provided by The Weather Channel)<br/>
]]></description>
|
onYahooWeatherRssResult() 将消息 div 的内部 HTML 设置为 <description> 元素的内容，在 mapplet 的控件中提供快捷的天气摘要，在 mapplet 中单击 Reload，重新加载 Google 缓存的 mapplet。然后，将地图拖动几毫米，触发 moveend 事件（这将触发在 runMapplet() 中建立的 mapplet 监听程序，使 mapplet 遍历整个过程）。将在地图左侧看到 RSS 提要中的气象摘要，如图 7 所示。
图 7. 在 mapplet 中显示 Yahoo! Weather RSS 提要的 <description> 元素
| |
|
