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. Layui表格之动态添加数据（表格多选解决方案）

    前言: Layui已经给出了多选记录的解决方案,是在每条数据的前面加上CheckBox,每次选择都有监听.效果是这样: 实现监听的代码如下,这是一种解决选择多条数据的方案: table.on('edi ...

  2. 【tips】RESTful架构

    认识RESTful在前后端分离的应用模式里,后端API接口如何定义?例如对于后端数据库中保存了商品的信息,前端可能需要对商品数据进行增删改查,那相应的每个操作后端都需要提供一个API接口:    PO ...

  3. 杭电 2035 (快速幂） 求A^B的最后三位数表示的整数

    Description 求A^B的最后三位数表示的整数. 说明:A^B的含义是“A的B次方”    Input 输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1<=A,B&l ...

  4. 本地==〉Github(push)

    [概述] Git中的项目是本地的,为了可以协同工作.需要将项目推送到GitHub服务器上. [步骤] 1) 第一步:创建项目 2) 第二步:在github上创建一个同名的空项目 ①选择Your rep ...

  5. angular（转）

    学习之前可以看看 知乎上讨论angularjs优缺点 帮你选择框架的网站 同类主流框架对比 教程 angularjs在慕课网 angularjs在51cto angularjs在图灵社区 社区 Ang ...

  6. js在HTML中的三种写法

    1.内联样式 内联样式分为两种,一是直接写入元素的标签内部 <html> <title>js样式内联写法</title> <meta http-equiv=& ...

  7. english & utils & tools

    english & utils & tools https://openlanguage.com/ https://www.grammarly.com/blog/email-writi ...

  8. bzoj3304[Shoi2005]带限制的最长公共子序列 DP

    题意:给出三个序列,求出前两个的公共子序列,且包含第三个序列,要求长度最长. 这道题目怎么做呢,f[i][j]表示a串1-i,b串1-j的最长,g[i][j]表示a串i-n,b串j-m最长, 那么只需 ...

  9. [K/3Cloud] 如何设置设置单据分录中的整列的精度

    有时,你可能想设置整列的精度,可以在插件中完成. 设置方法如下 : this.View.GetFieldEditor<DecimalFieldEditor>("FAmount&q ...

  10. Spring Data JPA 中常用注解

    一.java对象与数据库字段转化 1.@Entity:标识实体类是JPA实体,告诉JPA在程序运行时生成实体类对应表 2.@Table:设置实体类在数据库所对应的表名 3.@Id:标识类里所在变量为主 ...