科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道基础软件使用VirtualEarth开发地图程序

使用VirtualEarth开发地图程序

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

使用VirtualEarth开发地图程序

作者:dlwang2002 来源:博客园 2007年11月3日

关键字: VirtualEarth 开发地图 程序

  • 评论
  • 分享微博
  • 分享邮件
微软的VirtualEarth是个已经封装好的js类库,功能强大,使用它开发地图功能非常简单方便。

  这里的介绍分为这样几个部分:

  1:入门:在页面上显示地图

  2:几个主要对象的介绍:VEMap,VEPushPin,VEPloyLine,VERoute,VELatLang

  3:应用 :旅游图

  4:注意的问题(使用Atlas)

  这里是他的地址:http://dev.live.com/virtualearth/sdk/

  入门:在页面上显示地图

  1:页面的编码方式必须是utf-8方式。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  2:添加js库的引用

<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>

  3:添加显示地图的位置。也可以用css来定义。

<div id='myMap' style="position:absolute; width:400px; height:400px;"></div>

  4:创建地图对象,显示

<script>
var map = null;

function GetMap()
{
 map = new VEMap('myMap');
 map.LoadMap();
}
</script>

  然后在 <body onload="GetMap();">里面调用一下。

  经过这四步,就可以预览一下你的页面了,应该已经可以工作了。

  几个对象的介绍:VEMap,VEPushPin,VEPloyLine,VERoute,VELatLang

  1:VEMap地图对象

  主要个方法有三类:

  LoadMap用于加载地图;AddPushBin添加图钉;AddRoute添加路径,AddPlyline添加线条,等。当然还有删除它的方法。还有就是设置缩放的Level(level从0-19。0是全部,5可以看到大的城市,10可以看到我们镇了,13可以看到街道,17可以看到建筑物,19可以看到车,甚至人。不过,国内的大部分只能到13)

  FindLocation,Find等定位函数。不同的是,Find函数有返回结果,结果里面有位置的经纬度等。比方说 Find

1 function FindElvis()
2 {
3  map.Find('elvis','Las Vegas, NV','1',onFindResults);
4 }
5 function onFindResults(findResults)
6 {
7  var results="Find Results:\n";
8  for (r=0; r<findResults.length; r++)
9  {
10   results+=findResults[r].Name + ", " + findResults[r].Description+"\n";
11  }
12  alert(results);
13 }
14

  第三类是关于事件的,可以在地图上附加一些事件处理,比方说:map.AttachEvent('onclick', onMapClick);

  2:VEPushPin:图钉,用来在地图上做标记

  这是一个在鼠标点击的时候设置图钉的函数,比较典型 SetPushpin

1 function onMapClick(e)
2 {
3  var pinID = 3;//注意,id不能重复.
4  var pin = new VEPushpin(
5   pinID,
6   e.view.LatLong,
7   null, //这里可以是自己的图片
8   'My pushpin',
9   'This is pushpin number '+pinID
10  );
11
12  map.AddPushpin(pin);//怎么保存这些数据?自己创建数据表
13
14 }

  要点就那么几个:id不可重复;使用经纬度定位(下边有介绍如何获得经纬度);Pushpin的信息只能低级保存,如果你想下次还显示的话。

  3:VEPolyline:线条。可以在地图上显示线条,是一种折线,自己定义它的各个拐点。

  这里是一个比较典型的例子:

DrawPoly
1 function DrawPoly()
2 {
3  var points = new Array(
4   new VELatLong(45.01188,-111.06687),
5   new VELatLong(42.01534,-104.06324),
6   new VELatLong(42.01929,-104.06),
7   new VELatLong(41.003,-111.05878),
8   new VELatLong(47.01188,-111.06687)
9  );
10
11  poly = new VEPolyline('1',points);
12  poly.SetWidth(3);
13  poly.SetColor(new VEColor(0,150,100,100));
14  map.AddPolyline(poly);
15  map.SetMapView(points);
16 }

  要点是:数组里面存放的是经纬度;id不能重复。

  4:VERoute:显示两个地方的路径(甚至很详细的换车方式)。包括如何行车。

  例子: map.GetRoute("Space Needle", "Microsoft");

  可以设置使用最短路径还是时间最短的路径。

  但是,这里的路径只是陆路的,非常可惜,没有海路或者空运航线的。

  5:VELatLang:经纬度,定位信息。

  这个比较重要,因为很多地方都得用这个对象。

  这个对象有两个属性:latitude ,longitude ,就是纬度和经度。

  获得一个地方的经纬度有这么几个方式:

  1:通过鼠标点击

function onMapClick(e)
{
 alert(e.view.LatLong.Latitude+';'+e.view.LatLong.Longitude );
}

  2:通过获得地图中心:map.GetCenter();返回结果就是一个经纬度

  3:通过Find函数:上边有介绍

  4:自己查地图去吧

  应用:旅游图(动态添加自己的图钉和路径)

  1:添加数据表保存Pushpin和路径每个节点的信息(自己想办法获得经纬度)

  2:使用js动态写函数输出

  写一个旅游方面的应用:

  1:建立的自己的数据表:旅游线路表(ViewPathID...),旅游城市表(经纬度等信息),旅游线具体路径表(ViewPathID,PathDetailID)

  2:在GridView中显示旅游线路列表,可展开显示具体路径。旁边一按钮:ShowPin可以显示城市的信息(图片,介绍等),ShowRoute可以显示路经图

  3:在按钮的处理事件里面动态输出js

1 DataSet pins = Manager.DataManager.GetDataSet(sql + " where ViewPathID=" +key);
2 for (int i = 0; i < pins.Tables[0].Rows.Count; i++)
3 {
4  DataRow row = pins.Tables[0].Rows[i];
5  string pid = row["PinID"].ToString();
6  string vELatLong = String.Format("new VELatLong({0},{1})", row["Latitude"].ToString(), row["Longitude"].ToString());
7  string userImg = "null";//String.Format( "'{0}'", row["ImgCard"].ToString());
8  string pinName = String.Format("'{0}'", row["Name"].ToString());
9  string pinDes = String.Format("'{0}'", row["Description"].ToString());
10  string script = "";
11  script += "<script type='text/javascript' language='javascript'> " + "\r\n";//
12  script += " var a=1; " + "\r\n";
13  script += String.Format(" var pin=new VEPushpin({0},{1},{2},{3},{4}); ", pid, vELatLong, userImg, pinName, pinDes) + "\r\n";
14  script += " map.AddPushpin(pin); " + "\r\n";
15  //script += " alert('got'); " + "\r\n";
16  script += "</script> " + "\r\n";
17
18  this.Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowPin_" + pinName, script);

  里面的sql是一个查询语句,构造一个视图查询

  显示旅游线路的代码略...

  4:页面上的其他代码

function GetMap()
{
 map = new VEMap('myMap');
 map.LoadMap();
 map.FindLocation('JiNan,China');//for default place
 //上边两句可以替换成
 //map.LoadMap(new VELatLong(36.654097,116.968688),8);//这样可以直接加载默认页面,减少一次加载。
}
function FindLoc()
{
 map.FindLocation(document.getElementById('txtWhere').value);
 //map.SetZoomLevel(4);
}
function DeleteAllPushpins()
{
 map.DeleteAllPushpins();
}
function DeleteAllPolylines()
{
 应用:<body onload="GetMap();">
 地图:<div id='myMap' style="position: relative; width: 600px; height: 500px;"></div>

  注意,Id不可重复;最好自己写一些异常处理。

  Atals下的应用:UpdatePanle

  因为地图每次都要加载,特别是如果在Body里设置了OnLoad函数的话。所以,一旦这个页面上有其他应用,老天,你的问题就来了:每次的回发处理都想牛一样慢!

  解决它,就用Atals。放上几个UpdatePanle,都单独绘制,这样,在处理其他事件德时候,地图就不用更新了。

  测试结果:UpdatePanle可以顺利使用。Toolkit最好不用使用(我用了一个WaterMark,有冲突,可以参考我在其他关于AtalsToolkit的有关Bug的文章)。

查看本文来源

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章