随心所欲

做个幸福的人
posts - 147, comments - 1402, trackbacks - 28, articles - 0
  博客园 :: 首页 :: 新随笔 ::  :: 订阅 订阅 :: 管理

使用VirtualEarth开发地图程序

Posted on 2006-06-22 21:44 随心所欲 阅读(3992) 评论(21)  编辑 收藏 网摘 所属分类: AJAX : Atlas
微软的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

       第三类是关于事件的,可以在地图上附加一些事件处理,比方说:map.AttachEvent('onclick', onMapClick);
2:VEPushPin:图钉,用来在地图上做标记
      这是一个在鼠标点击的时候设置图钉的函数,比较典型
SetPushpin
      要点就那么几个:id不可重复;使用经纬度定位(下边有介绍如何获得经纬度);Pushpin的信息只能低级保存,如果你想下次还显示的话。
3:VEPolyline:线条。可以在地图上显示线条,是一种折线,自己定义它的各个拐点。
     这里是一个比较典型的例子:
    
DrawPoly
     要点是:数组里面存放的是经纬度;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的文章)。


意大利的比赛快开始了,其他问题,下次再说.

附,一个完整的例子
VirtualEarth的一个例子程序

Feedback

#1楼    回复  引用  查看    

2006-06-22 22:48 by overred      
good
please look this
http://overred.cnblogs.com/archive/2006/03/31/363903.html

#2楼 [楼主]   回复  引用  查看    

2006-06-23 08:07 by 随心所欲      
@overred
不错。

#3楼    回复  引用    

2006-06-23 08:23 by 空中飞人 [未注册用户]
Js类库在哪里呢?

#4楼 [楼主]   回复  引用  查看    

2006-06-23 08:24 by 随心所欲      
@空中飞人
<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
这个就是引用

#5楼    回复  引用    

2006-06-23 09:36 by QRQW [未注册用户]
老兄,你能不能给个完整的例子啊,包括那个js,虽然这样引用可以,但会不会很慢,下载到本地好些吧

#6楼    回复  引用    

2006-06-23 09:37 by QRQW [未注册用户]
你这样像吊胃口一样,讲又没完全讲明白,讲了一点点又没了下文

#7楼 [楼主]   回复  引用  查看    

2006-06-23 09:45 by 随心所欲      
@QRQW
等我整理一下,贴出一部分代码。

这些例子不是做的玩的,所以我会有其它方面的考虑,见谅。

#8楼    回复  引用  查看    

2006-06-23 13:50 by 哥哥.Net      
期待下文

#9楼    回复  引用    

2006-06-23 14:20 by xinf [未注册用户]
@随心所欲
可以理解,贴出一小部分代码也行,当个例子。

#10楼    回复  引用    

2006-06-23 14:36 by xinf [未注册用户]
那段代码好像展不开阿?
“3:在按钮的处理事件里面动态输出js”

#11楼 [楼主]   回复  引用  查看    

2006-06-23 18:17 by 随心所欲      
@xinf
修改了一下,可能是代码展开的时候有问题。

#12楼    回复  引用    

2006-06-25 01:11 by asdfsafsafs [未注册用户]
不贴出全部,给个小例子能演士也行啊,呵呵

#13楼 [楼主]   回复  引用  查看    

2006-06-25 10:01 by 随心所欲      
@QRQW

已经附出来了代码。
http://dlwang2002.cnblogs.com/archive/2006/06/25/435083.html


#14楼 [楼主]   回复  引用  查看    

2006-06-25 10:02 by 随心所欲      
@哥哥.Net
需要整理一下思路,然后来点总结或者问题列表。

#15楼    回复  引用    

2006-06-26 11:04 by Min.W [未注册用户]
请问,使用VirtualEarth开发地图程序,地图是否只能是微软提供的这张地图么?能不能换成我们自己的地图?要是能够换,那地图格式又是什么?刚研究GIS没几天,还想向大哥你请教。望能尽快听到你的答复,谢谢!!

#16楼 [楼主]   回复  引用  查看    

2006-06-26 11:52 by 随心所欲      
@Min.W
VirtualEarth只能使用微软的地图。微软提供了地图和如何操作这些地图的api,只不过这些api是js的,仅此而已。
如果你只是在你的项目中附加使用地图功能,VirtualEarth还是非常实用的;
如果你想做专门的地图系统,就像神州龙那样的,估计VirtualEarth就满足不了你的需求了。
一句话,看你的系统对地图质量的需求有多高。

#17楼 [楼主]   回复  引用  查看    

2006-06-26 11:55 by 随心所欲      
举个例子:VirtualEarth中也有路由的功能,自动给你计算出来两个地点的最佳行车路线(对北美最有效,多国内城市清晰度就比较一般了,只能到level 13),如果这样的功能就能满足你,那就用VirtualEarth;如果你要计算出来济南市从火车站出发到甸柳庄怎么坐公交车,VirtualEarth就满足不了你的需求了。

#18楼    回复  引用    

2006-06-26 14:04 by Min.W [未注册用户]
你的回复速度真让我.....非常感谢啦!!我们现在在做一个关于一个城市房产方面的GIS,估计是用不到这个东东,这么说来,其实我们用这个东东是在开发客户端的东东哦!!服务端是我们控制不了的。那你能为我推荐几款GIS组件么,最好是简单点的(上手快!),我自己找了个MapGuide,看了他的文档,一头雾水,正郁闷中呢!!!

#19楼 [楼主]   回复  引用  查看    

2006-06-26 16:00 by 随心所欲      
@Min.W
我也几乎没做过专门的GIS(我的项目里面只是附带着用一下),所以不能帮你。抱歉。

#20楼    回复  引用    

2006-07-13 14:27 by xueti [未注册用户]
出处在这里。

#21楼 [楼主]   回复  引用  查看    

2006-07-13 14:44 by 随心所欲      
由于是两个团队在做,所以这次Atlas发布新版本的时候VirtualEarth并没有动静。




标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2006-07-12 11:10 编辑过
Google站内搜索

China-pub 计算机图书网上专卖店!6.5万品种 2-8折!
近千种 9-95 新二手计算图书火热销售中!
开发者征途系统新作:《设计模式——基于C#的工程化实现及扩展》

相关文章:

相关链接:

 
Google