使用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的文章）。

查看本文来源