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

最新推荐文章于 2022-03-07 08:02:15 发布

antitest

最新推荐文章于 2022-03-07 08:02:15 发布

阅读量3.4k

点赞数

文章标签： javascript xmlhttprequest html google api class

本文链接：https://blog.csdn.net/antitest/article/details/1814413

版权

一．对Mashup 的理解

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

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

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

Mashup 站点。即 mashup 所在的地方。这是 mashup 逻辑所在的地方，而不是执行这些逻辑的地方。从一方面来说，mashup 可以直接使用服务器端动态内容生成技术（例如 Java servlets、CGI、PHP 或 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 api为javascript 接口，另外一方面，javascript是在客户端浏览器运行的，展示时不需要安装专门的web服务器，只需要打开相关的页面就可以进行显示，更为易用。

3.1地点标注

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

3.2天气标注

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

四．注意事项与存在问题

在开发中，采用了javascript主要是为了更方便的使用google map api与能够实现单独html文件即可运行的目的。但是，在申请了一个网站空间进行布署时，发现布署上去的含有javascript的html运行不正常。查看原因，主要是由于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'>

</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&v=2&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 οnlοad="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>