Bing必应地图中国API入门讲座之八：显示驾车路线
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还有很多有意思的属性可以挖掘，比如设置路径的颜色、粗细等等，朋友们自己去研究吧:)
Bing必应地图中国API入门讲座之八：显示驾车路线的更多相关文章
- Bing必应地图中国API一显示地图 (转) 做人要厚道
Bing必应地图中国API一显示地图 2011-05-24 14:27:31| 分类: Bing&Google|字号 订阅 微软必应地图中国地图API发布已经有10天了,考虑到网上现 ...
- Bing必应地图中国API - 在地图上画圆
Bing必应地图中国API - 在地图上画圆 2011-05-24 14:49:37| 分类: Bing&Google|字号 订阅 <变形金刚2>上映4日国内票房过亿,基 ...
- Bing必应地图中国API - 添加实时交通信息
Bing必应地图中国API - 添加实时交通信息 2011-05-24 14:44:58| 分类: Bing&Google|字号 订阅 2009年4月23日,微软必应地图中国API新 ...
- Bing必应地图中国API-显示兴趣点 （转）
Bing必应地图中国API-显示兴趣点 2011-05-24 14:29:55| 分类: Bing&Google|字号 订阅 在地图上显示一个兴趣点,这个应用可以说是最简单但是最广泛 ...
- Bing必应地图中国API-画线与添加多边形
Bing必应地图中国API-画线与添加多边形 2011-05-24 14:31:20| 分类: Bing&Google|字号 订阅 在必应地图上画线的功能应用也很广泛:显示从出发地到 ...
- Bing必应地图中国API-放大与平移
Bing必应地图中国API-放大与平移 2011-05-24 14:26:32| 分类: Bing&Google|字号 订阅 有些时候我们不希望通过默认的控制栏来控制地图,而是希望能 ...
- 百度地图 js api 实现 line 居中显示
项目中有个需求需要在百度地图的中心显示画的线,以前用过mapPanto这个方法,传入坐标就可以将地图平移到这个坐标,不过不知道如何获取线的中心点,看了别人的代码,有以下两个函数可以实现这个功能 get ...
- 必应地图api文档，微软必应地图web开发版详解，可以在国内使用国外地图
最近,公司项目要求在页面中嵌入地图,需求还算简单,但是由于必须具备响应式(主要是pc和移动端),而且由于公司业务是全球性的,要支持国外地点搜索.考虑到百度,腾讯,高德等等国内地图无法显示国外数据,谷歌 ...
- 必应(Bing)每日图片获取API
必应(Bing)每日图片获取API January 11, 2015 API http://lab.dobyi.com/api/bing.php 介绍 Value Description title ...
随机推荐
- BZOJ4873 LuoguP3749 寿司餐厅
题面太长,请诸位自行品尝—>寿司餐厅 分析: 首先题目中给了限制条件,假如选了D(i,j)(i<j),那么也就选了D(i+1,j)和D(i,j-1)两个点. 于是我们一下就明白了,哦,最大 ...
- Volume 1. Sorting/Searching(uva)
340 - Master-Mind Hints /*读了老半天才把题读懂,读懂了题输出格式没注意,结果re了两次. 题意:先给一串数字S,然后每次给出对应相同数目的的一串数字Si,然后优先统计Si和S ...
- restframework框架之认证
1. 认证之APIView 在聊APIView之前, 我们先重温一下django2.x的CBV流程 a. 对于django而言, 当浏览器请求到达之后,按照规则首先会经过各大中间件(Middlewar ...
- MyBaties异常之 ORA-00918: 未明确定义列
原因: 如果a表与b表连接,且a与b中存在两个相同的字段,则必须指明字段是哪个表的 箭头所致位置没有指定ROOM_ID为那个表的,应修改为t1.ROOM_ID
- WSS、SSL 和 https 之间的关系
SSL SSL(Secure Socket Layer,安全套接层) 简单来说是一种加密技术, 通过它, 我们可以在通信的双方上建立一个安全的通信链路, 因此数据交互的双方可以安全地通信, 而不需要担 ...
- String字符串类的获取功能
StringDemo.java /* * String类的获取功能: * int length():获取字符串的长度,其实也就是字符个数 * char charAt(int index):获取指定索引 ...
- Leetcode 152.乘机最大子序列
乘积最大子序列 给定一个整数数组 nums ,找出一个序列中乘积最大的连续子序列(该序列至少包含一个数). 示例 1: 输入: [2,3,-2,4] 输出: 6 解释: 子数组 [2,3] 有最大乘积 ...
- hihoCoder#1114 小Hi小Ho的惊天大作战：扫雷·一
原题地址 回溯+搜索 枚举每个位置上能否放地雷,当第i个位置枚举完成后,第i-1个位置的情况就确定了,此时,检查第i-1个位置是否满足要求,即左右间隔为1的范围内地雷数是否等于申明数字,如果满足条件, ...
- [BZOJ1029] [JSOI2007]建筑抢修（贪心 + 优先队列）
传送门 把数据存在结构体中,至于怎么贪心? 肯定会有些想法,正确错误先不必说,先来试一试. 1.按照 t2 为第一关键字从小到大排,按照 t1 为第二关键字从小到大排 这个显然错,比如后面有个数的 t ...
- Codeforces679C. Bear and Square Grid
n<=500,n*n的01矩阵,可以选择一个k*k的矩阵全变1,求最大1联通区域. 敢敢n^3..模拟k*k的矩阵的位置,从左到右扫的时候,每变一个位置只会引起边界的信息变化,就记含边界的k*k ...