`
hjcook
  • 浏览: 1672 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

Google Map Api 和Google Weather Api实践之天气预报

阅读更多

Google Weather Api可以接受经纬度坐标当参数来获取指定经纬度的天气情况,如湿度,风向等,同时也可以获取该点的后5天的天气预报情况。所以有了个想法,就是将 Google Weather Api支持的城市的天气情况,然后结合到GoogleMap中,可以直观显示出主要城市的天气情况。首先需要将天气情况存储到数据库中,用以后面的天气情况的显示。如下是针对Google Weather Api的调用并解析(Api调用地址: string GWP_Url = "http://www.google.com/ig/api?hl=zh-cn&weather=,,,{0},{1}";),发送请求解析保存到指定的数据库表。


Code
1         HttpWebRequest GWP_Request;
2         HttpWebResponse GWP_Response = null;
3         XmlDocument GWP_XMLdoc = null;
4         string GWP_Url = "http://www.google.com/ig/api?hl=zh-cn&weather=,,,{0},{1}";
5         System.Text.StringBuilder xmlHtml = new System.Text.StringBuilder();
6         try
7         {
8             GWP_Request = (HttpWebRequest)WebRequest.Create("http://www.google.com/ig/cities?output=xml&hl=zh-cn&country=cn");
9             GWP_Request.UserAgent = @"Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4";
10             GWP_Request.ContentType = "application/x-www-form-urlencoded";
11             GWP_Response = (HttpWebResponse)GWP_Request.GetResponse();
12             GWP_XMLdoc = new XmlDocument();
13             GWP_XMLdoc.Load(GWP_Response.GetResponseStream());
14             XmlNodeList xnl = GWP_XMLdoc.GetElementsByTagName("city");
15
16             if (xnl.Count > 0)
17             {
18                 DeleteWeatherInfo();
19                 foreach (XmlNode xn in xnl)
20                 {
21                     HttpWebRequest GWP_Request_temp;
22                     HttpWebResponse GWP_Response_temp = null;
23                     XmlDocument GWP_XMLdoc_temp = null;
24                     GWP_Request_temp = (HttpWebRequest)WebRequest.Create(string.Format(GWP_Url, xn.ChildNodes[1].Attributes["data"].Value.ToString(), xn.ChildNodes[2].Attributes["data"].Value.ToString()));
25                     GWP_Request_temp.UserAgent = @"Mozilla/4.0(compatible;MSIE 6.0;Windows NT 5.1;)";
26                     GWP_Request_temp.ContentType = "application/x-www-form-urlencoded";
27                     GWP_Response_temp = (HttpWebResponse)GWP_Request_temp.GetResponse();
28                     GWP_XMLdoc_temp = new XmlDocument();
29
30                     GWP_XMLdoc_temp.Load(XmlReader.Create(GWP_Response_temp.GetResponseStream()));
31
32                     if (GWP_XMLdoc_temp.SelectNodes("xml_api_reply/weather/current_conditions")[0] != null)
33                     {
34                         xmlHtml.Append("城市名称:" + xn.FirstChild.Attributes["data"].Value.ToString() + "   纬度: " + xn.ChildNodes[1].Attributes["data"].Value.ToString() + "  经度:" + xn.ChildNodes[2].Attributes["data"].Value.ToString() + GWP_XMLdoc_temp.SelectNodes("xml_api_reply/weather/current_conditions")[0].SelectSingleNode("condition").Attributes["data"].InnerText.ToString() + "  预报时间:" + DateTime.Parse(GWP_XMLdoc_temp.SelectNodes("xml_api_reply/weather/forecast_information")[0].SelectSingleNode("current_date_time").Attributes["data"].InnerText.ToString()).ToLocalTime().ToString() + "<br/>");
35                     }
36                     else
37                     {
38                         xmlHtml.Append("城市名称:" + xn.FirstChild.Attributes["data"].Value.ToString() + "   纬度: " + xn.ChildNodes[1].Attributes["data"].Value.ToString() + "  经度:" + xn.ChildNodes[2].Attributes["data"].Value.ToString() + "<br/>");
39                     }
40                     InsertWeatherInfo(xn.FirstChild.Attributes["data"].Value.ToString(), xn.ChildNodes[2].Attributes["data"].Value.ToString(), xn.ChildNodes[1].Attributes["data"].Value.ToString(), GWP_XMLdoc_temp.OuterXml.ToString());
41                     GWP_Response_temp.Close();
42
43                 }
44
45             }
46             GWP_Response.Close();

     获取对应的信息即可开始显示在地图上了,数据库表中有对应的经纬度信息,和相应的天气预报情况。 这里主要使用Google Map Api的GInfoWindowTab类显示对应以后每天的天气预报情况。点击查看在线Demo, GoogleMap显示天气预报信息 详细代码如下:


Code
var jsWeathers = Ext.util.JSON.decode(result.responseText);
    for (var i = 0; i < jsWeathers.length; i++) {
        var lat = jsWeathers[i].Lat * 0.000001;
        var lon = jsWeathers[i].Lon * 0.000001;
        var point = new GLatLng(lat, lon);
        var mark = new GMarker(point, { icon: getWeatherIcon(jsWeathers[i].WeatherInfos[0].Icon) });
        var infoTabs = [];
        for (var k = 0; k < jsWeathers[i].WeatherInfos.length; k++) {
            if (k == 0) {
                infoTabs.push(new GInfoWindowTab(jsWeathers[i].WeatherInfos[k].DayOfWeek, "城市:" + jsWeathers[i].CityName + "<br/>天气:" + jsWeathers[i].WeatherInfos[k].Conditon + "<br/>" + jsWeathers[i].WeatherInfos[k].Humidity + "<br/>" + jsWeathers[i].WeatherInfos[k].WindCondition));
            }
            else {
                infoTabs.push(new GInfoWindowTab(jsWeathers[i].WeatherInfos[k].DayOfWeek, "天气:" + jsWeathers[i].WeatherInfos[k].Conditon + "<br/>" + "最高温度:" + jsWeathers[i].WeatherInfos[k].High + "<br/>" + "最低温度:" + jsWeathers[i].WeatherInfos[k].Low));
            }
        }
        mark.infoTabs = infoTabs;
        map.addOverlay(mark);
        (function(mark, infoTabs) {
            GEvent.addListener(mark, "mouseover", function() {
                mark.openInfoWindowTabsHtml(infoTabs);
            });
        })(mark, infoTabs);




H.J     (转载请注明出处)

Blog:http://www.cnblogs.com/hjcook/

网站:www.lvtumap.com | blog.lvtumap.com

 

分享到:
评论

相关推荐

    Google map+yahoo!weather-天气查询-mashup

    Weather - 天气查询 Mashup”就是这样一个例子,它巧妙地结合了谷歌地图(Google Map)和雅虎天气(Yahoo! Weather)的服务,为用户提供了实时的地理位置天气查询功能。 首先,让我们了解一下谷歌地图(Google Map...

    Mashup:Google Map+Google Weather

    在本例中,“Mashup:Google Map + Google Weather”展示了如何将Google Maps API与Google Weather API结合起来,创建一个显示地图上特定位置天气状况的应用程序。 #### 二、JavaScript在Mashup中的作用 ...

    google map weather

    总的来说,"google map weather"是Google地图服务的一个重要组成部分,它利用先进的技术和API为用户提供全球天气信息。而"google.map.weather.js"则是实现这一功能的关键代码资源,对于开发者来说,它是探索和构建...

    天气预报源码

    6. **地图集成**:为了展示地理位置或天气图标,可能需要集成地图服务,如Google Maps API或OpenStreetMap。这需要理解地图API的使用,并可能涉及图层叠加、标注添加等操作。 7. **缓存策略**:为了提高性能和减少...

    WeatherApp:带有 OpenWeatherMap 和 Google Map API 的简单 Android 应用程序

    【标题】"WeatherApp"是一个基于Android平台的简单应用程序,它整合了OpenWeatherMap和Google Map API,为用户提供实时天气信息以及地理位置相关的气象展示。这个应用的开发使用了Java编程语言,展示了Android开发者...

    weather-app:节点darksky api谷歌地图api

    3. `app.js` - JavaScript文件,实现与API的交互以及地图和天气信息的处理。 4. `package.json` - Node.js项目的配置文件,记录依赖项和项目信息。 5. `node_modules` - 存放项目依赖的Node.js模块。 6. `.gitignore...

    React_Weather_Info:使用Open Weather Map API的天气显示应用

    React_Weather_Info是一个基于React构建的应用程序,设计用于获取并展示来自Open Weather Map API的实时天气信息。这个项目是学习和实践使用React、JSX、Material-UI库以及与开放Web服务接口交互的理想实例。 首先...

    world-weather-analysis:使用API​​连接点的世界天气数据的Python可视化

    世界天气分析此仓库是一个工作区,用于尝试从Open Weather Map API中提取数据,然后在iPython笔记本中的交互式google地图(“ gmaps”)可视化上创建热图,标记和方向。 要自行运行此代码,您需要在iPython笔记本的...

    Weather-App:☼Weather App是一个简单的获取天气的Web应用程序,它显示了世界上许多城市的天气状况。 它由开放天气API和Google Map API提供支持

    React天气应用程序☼Weather App是一个简单的获取天气的Web应用程序,它显示了世界上许多城市的天气状况。 它由开放天气API提供支持。可用的该项目可在React.js和HTML-Javascript上获得,有关javascript版本,请参见...

    谷歌地图 delphi 封装库 2013 0.1.9 全面支持google maps api

    一个老外(西班牙)编写的控件,封装了全部google maps api ,使用在DELPHI中使用谷歌地图变得非常简单 GMLib - Google Maps Library Send suggestions to gmlib@cadetill.com Supported Delphi version: Delphi 6...

    Weather-GoogleMap

    天气-GoogleMap 使用 Google Maps 和 OpenWeatherMap API 的基本 Web 应用程序。 三个文件:Weather_google.html、WeatherStyle.css、WeatherWidget.css。 打开html文件,输入地名,点击GEOCODE按钮,在谷歌地图上...

    基于云计算的天气预报系统实现.doc

    【基于云计算的天气预报系统实现】的文档主要探讨了如何利用云计算技术构建一个天气预报系统,结合了GoogleMap作为信息集成的平台,并涉及到区块链技术在其中可能的应用。以下是该系统的详细解析: 1. **云计算的...

    weather-react:各城市的天气。 Google Map API,Sparklines图表,openweathermap.org

    添加图像,字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时使用public文件夹 使用全局变量 添加引导程序使用自定义主题 增加流量 添加路由器 添加自定义环境变量 在HTML中引用环境变量 在Shell...

    weather_vs_weather:天气对天气

    这些API提供JSON或XML格式的天气预报数据,JavaScript代码负责解析这些数据并将其展示在地图上。 3. **天气图标**:为了更直观地展示天气状况,应用可能会使用一组天气图标,这些图标与从API获取的天气状态相对应,...

    WeatherApp:Weather App通过JSON从Forecast API解析数据

    "WeatherApp"是一个典型的示例,它展示了如何利用Java编程语言,从Forecast API获取并解析JSON数据,以提供准确的天气预报信息。这个项目不仅体现了Java在网络通信和数据处理方面的强大能力,同时也揭示了应用程序...

    World_Weather_Analysis:使用API​​检索和分析天气数据

    该项目的目的是使用来自OpenWeatherMap和Google Map Platforms的API调用,从随机的纬度和经度对中提取天气数据,并计划经过4个符合我们天气标准的城市的旅行。 项目分析 交付品1 我们生成了2,000个纬度和经度对的...

    Mapty-Weather:一个简单的网站,用于存储您的锻炼数据并在地理位置网站中进行更新。 它还显示了世界各地城市的天气

    Mapty-Weather还可能运用了地图应用编程接口(Map API),如Google Maps API或OpenStreetMap API,来显示地图和标注位置。地图API提供了丰富的功能,包括地图缩放、平移、以及在地图上添加标记和路径等功能,为用户...

    Weather-app:完整的天气应用

    天气应用完整的简单天气应用程序。入门从以下位置获取您自己的API密钥:设置Google Cloud API密钥: 转到Google Developers Console。 创建一个新项目。 从“左侧菜单”,转到“凭据”部分; 单击创建凭据并生成API...

    Android代码-World Weather

    An Android app that uses the Open Weather Map (https://openweathermap.org/API) to display current weather conditions and weather forecast in selected world cities. The app is available to download on:...

    最新高德地图demo

    本文将深入探讨如何使用最新的高德地图API在Android应用中实现天气预报和位置定位功能。 首先,我们需要在项目中集成高德地图SDK。这通常包括在build.gradle文件中添加依赖项,然后在AndroidManifest.xml中获取必要...

Global site tag (gtag.js) - Google Analytics