<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>国内主要城市天气查询</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA7p_xvTpFICJJfpNY9wB3hRRVfYAl4n6I9v16CsKNt755esXomxQ8VwDtoZdAOGyRy-ln2NTXN4pGIw"></script>
<script src="http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAAiYtfc52tHtwo4InEOGDqQRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTsDgavPJc5hchki92IXLS6mHFYoQ" type="text/javascript"></script>
<script type="text/javascript">
var map;
var geons="http:\/\/www.w3.org\/2003\/01\/geo\/wgs84_pos#";
var weatherns="http:\/\/xml.weather.yahoo.com\/ns/rss\/1.0";
var feedurlt="http:\/\/weather.yahoo.com\/forecastrss?p={id}&u={unit}";
google.load("feeds","1");
function YWeather(){
;
}
YWeather.prototype.process=function(result){
if(!result.error){
var xmldoc=result.xmlDocument;
var latitude=google.feeds.getElementsByTagNameNS(xmldoc.documentElement,geons,"lat")[0].firstChild.nodeValue;
var longtitude=google.feeds.getElementsByTagNameNS(xmldoc.documentElement,geons,"long")[0].firstChild.nodeValue;
var mdescription=xmldoc.getElementsByTagName("description")[1].firstChild.nodeValue;
var mlocation=google.feeds.getElementsByTagNameNS(xmldoc.documentElement,weatherns,"location")[0];
var mcondition=google.feeds.getElementsByTagNameNS(xmldoc.documentElement,weatherns,"condition")[0];
var title=mlocation.getAttribute("city")+":"+mcondition.getAttribute("text");
var point=new GLatLng(latitude,longtitude);
var marker=new GMarker(point,{
title:title}); //创建地标
map.addOverlay(marker); //添加涂层显示地标
GEvent.addListener(marker,"click",
function(){
marker.openInfoWindowHtml("<div style='font:14px'><strong>"+mlocation.getAttribute("city")+"</strong></div>+<div style='font:12px'>"+mdescription+"</div>");
}
);
}//end if
}; //end function
YWeather.prototype.loadWeather=function(loc,unit){
var idurl="http://xoap.weather.com/search/search?where="+loc;
var self=this;
GDownloadUrl(idurl, function(doc)
{
var xmldoc=GXml.parse(doc);
var location=xmldoc.documentElement.getElementsByTagName("loc");
if(location.length>0)
{
var i;
for(i=0;i<location.length;i++){
id=location[i].getAttribute("id");
self.unit=unit?unit:"c";
var wurl=feedurlt.replace("{id}",id).replace("{unit}",self.unit);
self.feed=new google.feeds.Feed(wurl);
self.feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
self.feed.load(self.process);
}
}
else
alert("抱歉，没有找到该城市信息%>_<%\n\n请试着扩大查询范围，如输入省名。");
}); //end GDownloadUrl
}; //end loadWeather
function initialize(){
var yweather = new YWeather();
yweather.loadWeather("china");
yweather.loadWeather("wuhan");
yweather.loadWeather("chongqing");
yweather.loadWeather("changsha");
yweather.loadWeather("changchun");
yweather.loadWeather("kunming");
yweather.loadWeather("xining");
yweather.loadWeather("haikou");
yweather.loadWeather("Lhasa");
yweather.loadWeather("Urumqi");
}
function load()
{
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(38,104),4); //缩放级别，越大图越详细
map.addControl(new GSmallMapControl(),new GControlPosition(3,new GSize(10,10)));
map.addControl(new GMapTypeControl());
google.setOnLoadCallback(initialize);
}
}
function myadd(){
var yweather = new YWeather();
yweather.loadWeather(document.getElementById("city").value);
}
function myremove(){
map.clearOverlays();
}
</script>
<style type="text/css">
<!--
.STYLE7 {
font-size: 14px;
font-weight: bold;
}
.STYLE8 {color: #996633}
-->
</style>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width:700px;height:600px"></div>
<p><br/>
<span class="STYLE7">点击地标可查看当地天气情况，图中没有该地地标请在此处<span class="STYLE8">添加</span>地标：</span></p>
<p><strong>请输入<span class="STYLE8">城市名</span>或<span class="STYLE8">省名</span>：
<input type="text" id="city" size="15"/>
(如hubei,wuhan,yichang等）</strong>
<input type="button" class="STYLE7" onclick="myadd()" value="添加地标" />
<input name="button" type="button" class="STYLE7" onclick="myremove()" value="移除所有地标"/>
</p>
</body>
</html>
Google map+yahoo!weather-天气查询-mashup
4星 · 超过85%的资源 需积分: 10 195 浏览量
2010-03-28
14:33:15
上传
评论 1
收藏 699KB RAR 举报 
mashup-html-天气查询-Google map-yahoo weather.rar （2个子文件） 
mashup-html-天气查询-Google map-yahoo weather 
googlemap-yahooweather-weather.comid-choose cities.html 5KB
进度汇报-10-1-3-小泡.doc 724KB资源评论
sldsg1232012-11-26还可以吧，有一定的参考价值
id0d02012-11-30版本略久 运行不了 不过还有一定参考价值- heshan6647540222012-04-06还行吧 在低版本的浏览器中可以 高版本中就出现问题了
yeona2011-10-20简洁美观，非常棒，谢谢分享~~~- aimosa2012-07-01运行的不起来
