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. npm run build报错（npm ERR! code ELIFECYCLE）的解决办法

    具体报错如下图: 环境:centos7 应该node_modules安装问题,我们需要重新安装 rm -rf node_modules rm package-lock.json npm cache c ...

  2. IO之DataStream数据流举例

    import java.io.*; public class TestDataStream { public static void main(String[] args) { ByteArrayOu ...

  3. linux arping-通过发送ARP协议报文测试网络

    博主推荐:更多网络测试相关命令关注 网络测试  收藏linux命令大全 arping命令是用于发送arp请求到一个相邻主机的工具,arping使用arp数据包,通过ping命令检查设备上的硬件地址.能 ...

  4. leds-gpio driver

    我们还是先看看platform device是如何define的 platform device 是如何定义的 example1 在板级驱动中定义, 通过platform_add_devices()函 ...

  5. Matlab学习笔记（三）

    二.MATLAB基础知识 (四)数组 MATLAB总是把数组看作存储和运算的基本单位,标量数据也被看作是(1×1)的数组 一维数组的创建 创建一维数组的几种方法:(e_two_14.m) 直接输入法: ...

  6. String字符串类的获取功能

    StringDemo.java /* * String类的获取功能: * int length():获取字符串的长度,其实也就是字符个数 * char charAt(int index):获取指定索引 ...

  7. ASP.NET获取客户端IP及MAC地址

    朋友最近问如何获取客户端IP及MAC地址,一直想把这段给整理一下,契机来了:下边分为了C#后台获取的方法和前台Javascript(调用ActiveX)获取的方法,大家如果有好的方法一起讨论撒O(∩_ ...

  8. [NOIP2005] 提高组 洛谷P1053 篝火晚会

    题目描述 佳佳刚进高中,在军训的时候,由于佳佳吃苦耐劳,很快得到了教官的赏识,成为了“小教官”.在军训结束的那天晚上,佳佳被命令组织同学们进行篝火晚会.一共有n个同学,编号从1到n.一开始,同学们按照 ...

  9. Elasticsearch的Java API做类似SQL的group by聚合。

    https://www.cnblogs.com/kangoroo/p/8033955.html

  10. HDU——2874 Connections between cities

    Connections between cities Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (J ...