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. 笔试算法题（30）：从已排序数组中确定数字出现的次数 & 最大公共子串和最大公共序列（LCS）

    出题:在已经排序的数组中,找出给定数字出现的次数: 分析: 解法1:由于数组已经排序,所以可以考虑使用二分查找确定给定数字A的第一个出现的位置m和最后一个出现的位置n,最后m-n+1就是A出现的次数: ...

  2. MySQL 日志初探

    目录 MySQL 日志初探 零.概述 一.Error Log(错误日志) 二.General Query Log(通用查询日志) 三.Slow Query Log (慢查询日志) 四.Binary L ...

  3. VSCODE插件开发：用户输入输出

    阅读这篇文章之前,假设你已经具有开发helloworld的插件的能力. vscode.window 简介 vscode.window 负责当前激活窗口的输入输出,比如展示信息,和用户输入等功能都是用v ...

  4. [Python3网络爬虫开发实战] 6.1-什么是Ajax

    Ajax,全称为Asynchronous JavaScript and XML,即异步的JavaScript和XML.它不是一门编程语言,而是利用JavaScript在保证页面不被刷新.页面链接不改变 ...

  5. Buffer.allocUnsafe()

    Buffer.allocUnsafe(size) size {Number} 分配一个 size 字节大小的新的非零填充(non-zero-filled)的 Buffer.size 必须小于等于 re ...

  6. Broadcasting

    目录 Broadcasting Key idea How to understand? Why broadcasting? Broadcastable? Broadcast VS Tile Broad ...

  7. 杭电 2803 The MAX（sort）

    Description Giving N integers, V1, V2,,,,Vn, you should find the biggest value of F.  Input Each tes ...

  8. 文件 jq 传到后台

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件. jQuery 2.0 ...

  9. 缩小Oracle目录下UNDOTBS01.DBF文件的大小

    缩小Oracle目录下UNDOTBS01.DBF文件的大小 分类: Oracle 使用sys用户登录Oracle 方法一:重置表空间大小 执行ALTER DATABASE DATAFILE 'D:OR ...

  10. BNUOJ 6719 Simpsons’ Hidden Talents

    Simpsons’ Hidden Talents Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU ...