Mashup-google map 天气标注的javascript实现
2007-10-07 21:51
302 查看
一．对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'>
<!--
.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&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'> ";
//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>
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'>
<!--
.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&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'> ";
//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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 支持Firefox的Mashup-google map 天气标注的javascript实现
- 百度地图之调用javaScript api接口实现多点标注及显示提示信息
- JavaScript获取本地城市和天气预报实现
- 利用Google Map和webservice实现天气预报
- 利用JavaScript实现天气菜单栏在网页边角处展现和隐藏的效果
- ArcGIS Api for javaScript 4.6 实现地图标注的点击事件
- PHP Ajax JavaScript Json获取天气信息实现代码
- (转)利用JavaScript实现图片标注——SearchMapIdentityTask
- 转：利用JavaScript实现图片标注——SearchMapIdentityTask
- PHP Ajax JavaScript Json 实现天气信息获取
- 用javascript为页面添加天气显示实现思路及代码
- PHP Ajax JavaScript Json 实现天气信息获取
- PHP Ajax JavaScript Json获取天气信息实现代码
- ArcGIS Api for javaScript 4.6 实现将一个标注显示在地图上
- JavaScript创建命名空间(namespace)的最简实现
- javascript实现倒计时N秒后网页自动跳转代码
- JavaScript实现防止网页被嵌入Frame框架的代码分享
- Javascript中的var_dump函数实现代码