使用VirtualEarth开发地图程序

最新推荐文章于 2025-12-17 05:11:21 发布

转载最新推荐文章于 2025-12-17 05:11:21 发布 · 793 阅读

文章标签：

#function #旅游 #string #microsoft #dataset #javascript

脚本技术/Javascript/浏览器兼容性同时被 2 个专栏收录

103 篇文章

订阅专栏

Asp.Net 2.0

77 篇文章

订阅专栏

本文介绍了如何利用Microsoft VirtualEarth SDK进行地图应用开发，涵盖基本的地图显示、关键对象的使用方法，如VEMap、VEPushPin等，并提供了一个旅游图应用实例。

出处：http://www.dezai.cn/Article_Show.asp?ArticleID=8815&ArticlePage=1

作者：佚名转自：http://www.cnblogs.com/dlwang2002/archive/2006/06/ 点击：616 发布日期：2006-6-27 微软的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库的引用

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是一个查询语句，构造一个视图查询

1 2 下一页