Bing必应地图中国API入门讲座之八：显示驾车路线

2011-05-24 14:47:36|  分类： Bing&Google|字号 订阅

 
 

这篇文章非常值得纪念，因为我是在Google大楼里写的，呵呵。正好过来找一个朋友吃饭，等他开完会议，抽空完成这篇文章。
Google中午提供免费的午餐，居然还有扇贝，外加甜点、水果。其实也不值几个钱，但是给人感觉好像福利很不错的样子。
 
回到正题。显示驾车路线主要用到了Map.GetDirections(locations, options)方法。关于这个方法的详细说明，参见http://msdn.microsoft.com/en-us/library/bb877838.aspx。
这儿简单说明一下Map.GetDirections(locations, options)的用法。locations参数表示整个路线经过的几个位置，至少包括起点和终点，最多可以设置25个点。options用来设置路径的选项，是一个VERouteOptions类，关于这个类的详细说明参见http://msdn.microsoft.com/en-us/library/bb877805.aspx。
 
一个最简单的用法就是：
Map.GetDirections(["三元桥","鸟巢"], options)；表示显示从三元桥到鸟巢的路径。当然我们也可以增加两个输入框，让用户输入起点和终点：
    <div>起点:<input id="txtStart" type="text" name="start" /></div>
    <div>终点:<input id="txtEnd" type="text" name="end" /></div>
这样的话，前面的方法应该改成Map.GetDirections([txtStart.value, txtEnd.value], options)；
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.1"></script>
      <script type="text/javascript"> 
  var map = null;
                  
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap(new VELatLong(39.9, 116.6), 5);            
        }
        function GetDirection() {
            var options = new VERouteOptions();
            options.RouteCallback = onGotRoute;
            map.GetDirections([txtStart.value,txtEnd.value], options);
        }
        function onGotRoute(route) 
        {
        }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:600px; height:480px;"></div>
    <div>起点:<input id="txtStart" type="text" name="start" /></div>
    <div>终点:<input id="txtEnd" type="text" name="end" />
    <input id="getdirection" type="button" value="Find" name="find" onclick="GetDirection();" />
    </div>
   </body>
</html>
上面的代码中，我们用到了options的回调函数，但是并没有制定回调函数的具体操作。其实我们可以自定义一些功能，比如详细输出整个路线的文字描述。只需要把
onGotRoute（）函数用下面的代码替换：
         function onGotRoute(route) 
         {
             var legs = route.RouteLegs;
             var turns = "Total distance: " + route.Distance.toFixed(1) + " mi\n";
             var numTurns = 0;
             var leg = null;
             // Get intermediate legs
             for (var i = 0; i < legs.length; i++)
             {
                 // Get this leg so we don't have to derefernce multiple times
                 leg = legs[i];  // Leg is a VERouteLeg object
                 // Unroll each intermediate leg
                 var turn = null;  // The itinerary leg
                 for (var j = 0; j < leg.Itinerary.Items.length; j++)
                 {
                     turn = leg.Itinerary.Items[j];
                     // turn is a VERouteItineraryItem object
                     numTurns++;
                     turns += numTurns + ".\t" + turn.Text + " (" + turn.Distance.toFixed(1) + " mi)\n";
                 }
             }
             alert(turns);
         }
其实options还有很多有意思的属性可以挖掘，比如设置路径的颜色、粗细等等，朋友们自己去研究吧:)

引用：http://www.htchen.com/post/10.html

Bing必应地图中国API入门讲座之八：显示驾车路线的更多相关文章

  1. Bing必应地图中国API一显示地图 (转) 做人要厚道

    Bing必应地图中国API一显示地图 2011-05-24 14:27:31|  分类: Bing&Google|字号 订阅     微软必应地图中国地图API发布已经有10天了,考虑到网上现 ...

  2. Bing必应地图中国API - 在地图上画圆

    Bing必应地图中国API - 在地图上画圆 2011-05-24 14:49:37|  分类: Bing&Google|字号 订阅     <变形金刚2>上映4日国内票房过亿,基 ...

  3. Bing必应地图中国API - 添加实时交通信息

    Bing必应地图中国API - 添加实时交通信息 2011-05-24 14:44:58|  分类: Bing&Google|字号 订阅     2009年4月23日,微软必应地图中国API新 ...

  4. Bing必应地图中国API-显示兴趣点 （转）

    Bing必应地图中国API-显示兴趣点 2011-05-24 14:29:55|  分类: Bing&Google|字号 订阅     在地图上显示一个兴趣点,这个应用可以说是最简单但是最广泛 ...

  5. Bing必应地图中国API-画线与添加多边形

    Bing必应地图中国API-画线与添加多边形 2011-05-24 14:31:20|  分类: Bing&Google|字号 订阅     在必应地图上画线的功能应用也很广泛:显示从出发地到 ...

  6. Bing必应地图中国API-放大与平移

    Bing必应地图中国API-放大与平移 2011-05-24 14:26:32|  分类: Bing&Google|字号 订阅     有些时候我们不希望通过默认的控制栏来控制地图,而是希望能 ...

  7. 百度地图 js api 实现 line 居中显示

    项目中有个需求需要在百度地图的中心显示画的线,以前用过mapPanto这个方法,传入坐标就可以将地图平移到这个坐标,不过不知道如何获取线的中心点,看了别人的代码,有以下两个函数可以实现这个功能 get ...

  8. 必应地图api文档，微软必应地图web开发版详解，可以在国内使用国外地图

    最近,公司项目要求在页面中嵌入地图,需求还算简单,但是由于必须具备响应式(主要是pc和移动端),而且由于公司业务是全球性的,要支持国外地点搜索.考虑到百度,腾讯,高德等等国内地图无法显示国外数据,谷歌 ...

  9. 必应(Bing)每日图片获取API

    必应(Bing)每日图片获取API January 11, 2015 API http://lab.dobyi.com/api/bing.php 介绍 Value Description title ...

随机推荐

  1. CSU1018: Avatar

    1018: Avatar Submit Page   Summary   Time Limit: 1 Sec     Memory Limit: 128 Mb     Submitted: 841   ...

  2. thinkPHP5搭建以及使用

    0X01 Thinkphp 的安装 我这里选择的是使用 windows 下的 composer 进行安装,收下首先下载 composer 这个工具,安装完成以后进入我们想要创建项目的文件夹输入下面的命 ...

  3. 并不简单的Integer

    Integer是一个看着挺简单的,其实还是有点不一样,Integer是一个int的包装类,它是可以起到缓存作用的,在java基础里说过它的范围是(-128-127)在这个返回是有缓存的,不会创建新的I ...

  4. python_字符串常用方法

    1.切片就是通过索引(索引:索引:步长)截取字符串的一段,形成新的字符串(原则就是顾头不顾腚). a = 'ABCDEFGHIJK' print(a[0:3]) # print(a[:3]) 从开头开 ...

  5. 02--Activiti初始化表

    初始化数据库 方法一:执行sql脚本文件activiti-5.13\database\create\activiti.mysql.create.*.sql文件 方法二:代码创建(有流程自然就有表) p ...

  6. fielddata breaker与cache size

    breaker的估算,是根据语句以及上层的结果数,加上固定的值,不准确. cache.size是cache到结果的size,准确. 所以,配置breaker不能拦截占用内存的聚合查询,而配置cache ...

  7. ZOJ 3910 Market

    Market Time Limit: 2 Seconds      Memory Limit: 65536 KB There's a fruit market in Byteland. The sal ...

  8. POJ-1679 The Unique MST,次小生成树模板题

    The Unique MST Time Limit: 1000MS   Memory Limit: 10000K       Description Given a connected undirec ...

  9. [K/3Cloud] 创建一个业务单据表单插件

    概念 创建一个业务单据插件,处理单据的相关控制逻辑. 示例 新建一个类,继承自单据插件基类Kingdee.BOS.Core.Bill.PlugIn.AbstractBillPlugIn. using ...

  10. javaSctipt基础

    ===================================== JavaScript 脚本语言===================================== 什么是JavaSc ...