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; 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
";
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 + ". " + turn.Text + " (" + turn.Distance.toFixed(1) + " mi)
";
}
}
alert(turns);
}
其实options还有很多有意思的属性可以挖掘，比如设置路径的颜色、粗细等等，朋友们自己去研究吧:)