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还有很多有意思的属性可以挖掘,比如设置路径的颜色、粗细等等,朋友们自己去研究吧:)
最新文章
- AdaBoost算法实现
- linux进程间通信-概述
- 活跃天数计算用户等级模仿QQ的升级方式
- CentOS7+Redis Live安装配置
- 常用的机器学习&;数据挖掘知识点【转】
- 【笨嘴拙舌WINDOWS】编码历史
- leecode 排列的学习
- partial局部类
- HTML 5 在Web SQL 使用演示样本
- [阿里云部署] Ubuntu+Flask+Nginx+uWSGI+Mysql搭建阿里云Web服务器
- 函数式编程--使用lambda表达式
- shell脚本中文件测试
- TortoiseGit- 创建本地新分支,提交推送到远程,本地新分支合并到工作分支,提交到远程工作分支等。
- Java IO流操作汇总: inputStream 和 outputStream【转】
- android经典源码,很不错的开源框架
- Safari导入Chrome书签
- 数论知识点总结(noip范围)
- visual studio 2015 2017 key vs2015 vs2017密钥
- org.apache.shiro.session.InvalidSessionException: java.lang.IllegalStateException: getAttribute: Session already invalidated] with root cause
- axios构建请求池处理全局loading状态&;&;axios避免重复请求