Mashup-google map 天气标注的javascript实现

原创 2007年10月07日 21:51:00

一.对Mashup 的理解

Mashup 是一种令人兴奋的交互式 Web 应用程序,它利用了从外部数据源检索到的内容来创建全新的创新服务。Mashup具有第二代 Web 应用程序的特点,是一种基于基于 Web 的数据集成应用程序方式,它的流行萌芽于对交互式用户参与和集成第三方数据方式的重视。它Mashup利用了从组织边界之外的数据源获取的内容和功能而正在Web 上扎根发芽。

Mashup 程序从架构上是由 3 个不同的部分组成的,它们在逻辑上和物理上都是相互脱离的(可能由网络和组织边界分隔):API/内容提供者、mashup 站点和客户机的 Web 浏览器。

        API/内容提供者。它们是正在进行融合的内容的提供者。

        Mashup 站点。即 mashup 所在的地方。这是 mashup 逻辑所在的地方,而不是执行这些逻辑的地方。从一方面来说,mashup 可以直接使用服务器端动态内容生成技术(例如 Java servletsCGIPHP ASP)实现为类似传统 Web 应用程序。

       客户机的 Web 浏览器。这是以图形化的方式呈现应用程序的地方,也是用户交互发生的地方。

二.自己的Mashup程序构造思想

2.1 初步预想

通过对于mashup的了解,结合到任务的要求,我认为应该从下面三个方面来完成任务:

地图的显示

地图上面地点的标注

标注地点上对应的天气信息

     然后开始对于这三个方面的来进行信息查找工作。

2.2在查询资料的过程中得到的信息:

   2.1.1地图的显示

        地图的显示方面,从mashup的思想上面来说,是要借用其它的api提供者来提代地图的显示,在实际的查找中,发现如下api

        Google map 公布了api

        Yahoo map 公布了api

        通过对于两者从广泛性与易用性及地图的质量方面的比较,最终选择了Google map api来完成地图显示的功能。

   2.1.2地图上面地点的标注

        通过上面的地图显示上面资料的查找中,发现在地图地点的标注中,也可以运用google map api来完成地图上相关地点的标识。在google map api 的运用中,有一些函数能够通过经度,纬度来完成相关地点在地图上面的标识。

   2.1.3标注地点上对应的天气信息

        在对于天气信息的标注中,在查询信息的过程中,确定了两种标注天气的思路。第一种是通过在现有的天气网站上面获取信息。

实施方法:通过程序代码将天气网站上天气显示页面抓取下来,然后分析获取的文件,从中得到天气信息。

第二种是通过天气网站的api进行操作。在这个过程中,我找到了google

Weather api ,这个api可以通过经度与纬度进行查询,然后返回相应经度与纬度的天气xml信息。

在对比中,第一种方法实施起来比较困难,而且通过对天气网站显示页面分析来得到天气信息,扩展性不好,如果天气显示页面作更改,那么程序代码就可能需要重写。

而第二种方法由于其通过经度与纬度就可以返回相应地点的天气xml文件信息,更稳定,而且分析起来更方便。而且,作为地点的标注中,我们标注的地点中,最核心的信息是经度与纬度信息,对应的扩展性就更好,对于任何一个地点,只需要提供其经度与纬度信息,就可以知道其天气的信息。如果需要增加天气的信息,只需要增加地点经纬度信息即可,更加方便,易用。

2.3 设计思想

通过查询资料得知到google map 公布了其api ,主要确定为通过google map来完成地图的显示,用google weather api提供相应点的天气信息。

流程如下:

读取地点信息(包括 经度与纬度)à标注相应的地点à标注过程中添加标注点的点击函数,点击函数中包括了对于天气信息获得的函数à用户点击后在标注信息中显示天气

 

三.Mashup实施

准备好各方面的工作,开始对Mashup进行实施。在实施中,主要采用javascript 作为编程语言,一方面是由于google map apijavascript 接口,另外一方面,javascript是在客户端浏览器运行的,展示时不需要安装专门的web服务器,只需要打开相关的页面就可以进行显示,更为易用。

3.1地点标注

在地点的标注中,采用了从其它地点获取城市地点标注的方法,通过javascript代码来访问远程地点信息,返回一个包含各个地点名与其经纬度的xml文件,再通过对这个文件进行分析,获取各个地点的地点名称与其相应的经纬度。在实际的操作中,此种方面提供了较大的扩展性,如果想对地点进行扩展,那么只需要更改访问地点名称的网址即可。或者自己在建立站点时,可以建立自己的城市xml文件,按照相应的格式进行地点的信息标注,更改网址为自己的城市文件网址就可以对标注地点进行自由扩展。

3.2天气标注

对于天气的标注,主要的思想是在进行地点的标注的同时,将对天气的标注函数添加到各个标点的点击函数中。在进行地图显示时,不需要对天气的信息进行读取,只有在用户点击了某个标注点时,天气标注函数才会工作,显示该地点的天气信息。天气标注函数是用到google weather api ,通过经度与纬度信息进行查询,返回一个相应经度与纬度的天气信息xml文件。得到天气信息xml文件后,再对xml文件进行解析,取出相应的天气信,显示给用户。

四.注意事项与存在问题

在开发中,采用了javascript主要是为了更方便的使用google map api与能够实现单独html文件即可运行的目的。但是,在申请了一个网站空间进行布署时,发现布署上去的含有javascripthtml运行不正常。查看原因,主要是由于javascript访问外部google weather api与获取外面地点信息不被该服务器所允许,所以只看到了google地图。

在操作中,可以拷贝下面的代码到一个html文件,直接点击运行即可,在运行中,要允许脚本执行,那么标注信息与天气信息都能够显示出来。

五.Mashup代码

  <!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" xmlns:v="urn:schemas-microsoft-com:vml">
<!//注意此处:xmlns:v="urn:schemas-microsoft-com:vml" 如果不加,那么其地点标示与折线都显示不出来,还有下面的字符集,设置成为GB2312>

  <head>
   <style type='text/css'>
<!--
.style1 {font-size: small}
-->
</style>
    <meta http-equiv="content-type" content="text/html; charset=GB2312"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAJeqwJZH0QPpNkLuHzBo8RBRfn8B5SQkBuwTVutTjsDdD1kuwehQjeM1Zcgj3hXxqNP_k1Y_twXp43Q"
      type="text/javascript">
   </script>
   <script type="text/javascript">
    //<![CDATA[
//主函数  调用google map api 显示地图
function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap(document.getElementById("map"));
        //map.setMapType(G_SATELLITE_TYPE);
        //map.addControl(new GSmallMapControl());
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.centerAndZoom(new GPoint(116.279998,39.930000), 13);
        ///
        var request = false;
        request = createRequest();
        //创建城市标注,标注的过程中将天气进行标注
        markCity(map,request);
     
      }
    }

/*
**通过point信息对地图上面进行标注,显示相应点上的天气信息
*/
function createMarker(point, map, myName, request) {
  var marker = new GMarker(point);
  var html0="<table width='229' height='133' border='1' bordercolor='#0099CC' bgcolor='#FFFFFF'><tr><td width='60' class='style1'><b>"+myName+"</b>";
  var html;
  GEvent.addListener(marker, "click", function() {
   //在标注的地点中的过程中,标注出天气信息
   html=html0+createMarkerWeather(point, request);;
    marker.openInfoWindowHtml(html);
   
  });
  map.addOverlay(marker);
 
}

/*
**依据于point通过XMLHttpRequest 对象从google weather 获得相应地点天气信息,并形成格式字符串返回
*/
function createMarkerWeather(point,request){
 var str="hello,world";
 var html1="</td><td colspan='2' class='style1'>";
 //Date
 var html2="</td><td width='59' class='style1'>";
 //cloudy
 var html3="</td></tr><tr><td class='style1'>平均温度</td><td width='19' class='style1'>";
 //31
  var html4="</td><td width='63' class='style1'>最高温度</td><td class='style1'>";
 //32
 var html5="</td></tr><tr><td class='style1'>最低温度</td><td class='style1'>";
 //23
 var html6="</td><td colspan='2' align='left' class='style1'>&nbsp";
 //Humidity
 var html7="</td></tr><tr><td height='22' class='style1'>";
 //NextD0
 var html70="</td><td colspan='3' class='style1'>";
 //next0;
 var html8="</td></tr><tr><td height='22' class='style1'>";
 //NextD1
 var html80="</td><td colspan='3' class='style1'>";
 //next1;
 var html9="</td></tr><tr><td height='22' class='style1'>";
 //NextD
 var html90="</td><td colspan='3' class='style1'>";
 //next2;
 var html10="</td></tr></table>";
 
  //调用 google weather api ,返回一个当地天气列表的 xml文件
 var strURL="http://www.google.com/ig/api?hl=zh-cn&weather=,,,"+point.y*1000000+","+point.x*1000000;

  request.open("GET",strURL,false);
  request.send();
  var myXD = new ActiveXObject("MSXML2.DOMDocument");
  myXD.loadXML(request.responseText);
 
  //日期
  var myDate;
  //天气状况
  var myCondition;
  //平均温度
  var myTemp;
  //湿度
  var myHumidity;
  //最高温度
  var myHigh;
  //最低温度
  var myLow;
  //明天星期与天气状况
  var myDay0;
  var myNext0;
  //后天星期与天气状况
  var myDay1;
  var myNext1;
  //大后天星期与天气状况
  var myDay2;
  var myNext2;
 
  var informationNodes = myXD.getElementsByTagName("xml_api_reply/weather")[0].childNodes;
  //取出天气信息
  var strNodes = informationNodes[0].childNodes;
  myDate = strNodes[4].getAttribute("data");
 
  strNodes = informationNodes[1].childNodes;
  myCondition = strNodes[0].getAttribute("data");
  myTemp = strNodes[2].getAttribute("data");
 
  myHumidity = strNodes[3].getAttribute("data");
 
  strNodes = informationNodes[2].childNodes;
  myLow = strNodes[1].getAttribute("data");
  myHigh = strNodes[2].getAttribute("data");
 
  strNodes = informationNodes[3].childNodes;
  myDay0 = strNodes[0].getAttribute("data");
  myNext0 = strNodes[4].getAttribute("data");
 
  strNodes = informationNodes[4].childNodes;
  myDay1 = strNodes[0].getAttribute("data");
  myNext1 = strNodes[4].getAttribute("data");
 
  strNodes = informationNodes[5].childNodes;
  myDay2 = strNodes[0].getAttribute("data");
  myNext2 = strNodes[4].getAttribute("data");
  //构造天气信息显示的字符串
  str=html1+myDate+html2+myCondition+html3+myTemp+html4+myHigh+html5+myLow+html6+myHumidity;
  str+=html7+myDay0+html70+myNext0+html8+myDay1+html80+myNext1+html9+myDay2+html90+myNext2+html10;

  return  str;
}

/*
** 依据地点信息文件cities.xml,对地图进行标注
*/
function markCity(map,request){
  //var request = false;
   //request = createRequest();
   //读取cities.xml文件,进行地名的解析
   //采取这种方式,保证了最大程度上的扩展性,如果有更新的城市地名表,那么只需要将下面的网址进行修改即可
   //如果需要增多城市,只需要在xml文件中增加新的城市信息即可
   request.open("GET","http://www.google.com/ig/cities?output=xml&hl=zh-cn&country=cn",false);
   request.send();
   var myXD = new ActiveXObject("MSXML2.DOMDocument");
   if (myXD == null)
   alert("help");
   myXD.loadXML(request.responseText);
  //myXD.loadXML("cities.xml");
   //取出城市的信息
   var myNodes = myXD.getElementsByTagName("xml_api_reply/cities")[0].childNodes;
   var l = myNodes.length;
   //城市名称
   var myName;
   //经度
   var myX;
   //纬度
   var myY;
   //标注点
   var point;
   //城市结点
   var strNodes;
       for(var i=0; i<l; i++)
      {
          //从xml中取出一个城市的数据结点
          strNodes = myNodes[i].childNodes;
          //取出城市名与经纬度
          myName = strNodes[0].getAttribute("data");
          myX = strNodes[2].getAttribute("data");
          myY = strNodes[1].getAttribute("data");
          //构造标注点进行标注
          point = new GPoint(myX/1000000, myY/1000000);
          createMarker(point, map, myName,request);
        }


}
/*
** 返回一个XMLHttpRequest 对象
*/
function createRequest() {
 var request;
  try {
    request = new XMLHttpRequest();
  } catch (trymicrosoft) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = false;
      }
    }
  }
  if (!request)
    alert("Error initializing XMLHttpRequest!");
  return request;
}

    //]]>
    </script>
  
  </head>
  <body onload="load()" >
  <table width="800" height="600" border="1" align="center">
    <tr>
      <td align="center"><div id="map" style="width: 800px; height: 600px"></div></td>
    </tr>
  </table>
 
    <div id="message"></div>
  </body>
</html>

 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Google_map_JavaScript_API_V3

  • 2014-05-26 16:40
  • 1.61MB
  • 下载

google map api v3实现将多个标注展示在最佳视野

由于最近在做一个要切换百度地图和谷歌地图的双地图应用,一开始做的是百度地图,要

Google Map API(JavaScript) V3.0简介

最近在公司要做一个关于Google Map使用的分享。因为准备的时间比较仓促,所以就只准备了几个常用模块的内容。 如何开始使用Google Map API(JavaScript)? 如何开始使...

PHP连接mysql数据库,调用Google Map显示不同地方地图信息,使用Javascript弹出悬浮信息窗口展示。

PHP连接mysql数据库,调用Google Map显示不同地方地图信息,使用Javascript弹出悬浮信息窗口展示。 #cat db_map4.php <?...

Google Map开发系列(四)——使用JavaScript创建地图步骤详解

一段经过精简的代码:   新建一个空白的文本文件,把上面这段代码copy过去,不要改变代码的任何顺序,然后

Google Map开发系列(四)——使用JavaScript创建地图步骤详解

一段经过精简的代码:          var map = new GMap2(document.getElementById("mapContainer"));   ...

Google Map开发系列(四)——使用JavaScript创建地图步骤详解

一段经过精简的代码: [javascript] view plaincopy "http://ditu.google.com/maps?file=api&h...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)