详解百度地图API之驾车导航

本文将向大家介绍如何使用百度地图API提供的驾车导航服务进行开发。

一个简单的示例

驾车导航服务根据传入的起点和终点信息给出从起点到终点的驾车路线，我们先从一个最简单的示例看起：

varmap = newBMap.Map('container');
map.centerAndZoom(newBMap.Point(116.404, 39.915), 11);
vardriving = newBMap.DrivingRoute(map, {
renderOptions: {
map: map
}
});
driving.search('圆明园', '西单');

上面代码很简单，先初始化地图（地图容器的html代码省略），接着实例化一个DrivingRoute类，并配置好参数（参数具体含义后续再说）。最后调用该实例的search方法进行驾车方案查询。我们会在浏览器看到如下效果：

DrivingRoute的构造函数的第一个参数制定检索的范围，这里我们传递的是map实例，也就是说驾车导航的位置会根据当前地图中心点所在的城市进行检索。当然你也可以传递一个城市名称的字符串：

vardriving = newBMap.DrivingRoute("北京", {
renderOptions: {
map: map
}
});

DrivingRoute的构造函数第二个参数是可选的配置，类型为DrivingRouteOptions。这里我们只使用了renderOptions属性，这个属性值的类型为DrivingRenderOptions类，它是用来控制检索结果的呈现的，比如是否将结果线路呈现在地图上，是否将详细方案描述呈现在页面的某个位置等等。这里我们使用了map属性，即让检索结果自动展现在地图上，这样我们就会看到地图上有起点、终点以及它们之间的线路了。

呈现设置

除了设置展现的地图以外，呈现设置中还有很多其他功能，最常用的就是将详细方案描述显示在页面上：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>驾车导航</title>
<script src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div id="container"style="width:400px;height:248px"></div>
<div id="panel"style="position:absolute;left:420px;top:10px"></div>
<script>
varmap =newBMap.Map('container');
map.centerAndZoom(newBMap.Point(116.404, 39.915), 11);vardriving =newBMap.DrivingRoute(map, {
renderOptions: {
map: map,
panel: 'panel'}
});
driving.search('圆明园', '西单');</script>
</body>
</html>

这里我们增加一个div，id为panel，接着在renderOptions中增加panel属性，把div的id传递进去。我们会看到如下效果：

API会将详细的驾车方案描述填充到id为panel的div容器中。此时点击panel中的具体方案会在图区产生交互效果。

另外，呈现设置的enableDragging如果设置为true的画，则用户可以在地图上拖拽起点、终点改变驾车方案，也可以任意拖拽修改途径点：

vardriving = newBMap.DrivingRoute(map, {
renderOptions: {
map: map,
panel: 'panel',
enableDragging: true
}
});

highlightMode属性可以控制点击panel中的方案描述时展示点位置还是展示一段路线，它支持如下两个值：

BMAP_HIGHLIGHT_STEP：展现关键点

BMAP_HIGHLIGHT_ROUTE：展现路段

默认为展现关键点，如下图：

点击描述的第三项，显示一个关键点信息（根据描述，这个点就是在中关村一桥左转的位置点），也可以显示路线：

这时，再选中第三步的时候，地图展现的是一段线路（即“沿中关村北大街行驶1.6公里”这段路）。

驾车策略配置

在DrivingRouteOptions还有一个控制策略的属性drivingPolicy，它的属性值可以为以下几种：

BMAP_DRIVING_POLICY_LEAST_TIME：最少时间，默认

BMAP_DRIVING_POLICY_LEAST_DISTANCE：最短距离

BMAP_DRIVING_POLICY_AVOID_HIGHWAYS：避开高速

通过配置策略可获得不同的驾车方案。

回调函数

在DrivingRouteOptions里面还有很多回调函数属性，比如：onSearchComplete、onMarkersSet、onInfoHtmlSet、onPolylinesSet和onResultsHtmlSet。在DrivingRoute类上也有对应的设置回调的方法：setSearchCompleteCallback、setMarkersSetCallback等等。实际上不论通过配置参数传递还是通过接口设置回调，其作用都是一样的。这些回调到底有什么用处呢？

通过回调函数，开发者可获得更多的数据资源，可以利用这些数据资源更好、更灵活的进行二次开发。下面这个示例就是利用onSearchComplete获取数据自行添加覆盖物和描述信息：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>驾车导航</title>
<script src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div id="container"style="width:400px;height:248px"></div>
<div id="panel"style="position:absolute;left:420px;top:10px"></div>
<script>
varmap =newBMap.Map('container');
map.centerAndZoom(newBMap.Point(116.404, 39.915), 11);vardriving =newBMap.DrivingRoute(map, {
onSearchComplete: function(results){if(driving.getStatus() ==BMAP_STATUS_SUCCESS) {//地图覆盖物
addOverlays(results);//方案描述
addText(results);
}
}
});
driving.search('圆明园', '西单');//添加覆盖物并设置视野
functionaddOverlays(results) {//自行添加起点和终点varstart =results.getStart();varend =results.getEnd();
addStart(start.point, start.title);
addEnd(end.point, end.title);varviewPoints =[start.point, end.point];//获取方案varplan =results.getPlan(0);//获取方案中包含的路线for(vari =0;i <plan.getNumRoutes(); i ++) {
addRoute(plan.getRoute(i).getPath());
viewPoints.concat(plan.getRoute(i).getPath());
}//设置地图视野
map.setViewport(viewPoints, {
margins: [40, 10, 10, 10]
});
}//添加方案描述
functionaddText(results) {varplan =results.getPlan(0);//获取方案中包含的路线varhtmls =[];for(vari =0;i <plan.getNumRoutes(); i ++) {varroute =plan.getRoute(i);for(varj =0;j <route.getNumSteps(); j ++) {varcurStep =route.getStep(j);
htmls.push((j +1) +'. '+curStep.getDescription() +'<br />');
}
}varpanel =document.getElementById('panel');
panel.innerHTML =htmls.join('');
panel.style.lineHeight ='1.4em';
panel.style.fontSize ='12px';
}//添加起点覆盖物
functionaddStart(point, title){
map.addOverlay(newBMap.Marker(point, {
title: title,
icon: newBMap.Icon('blue.png', newBMap.Size(38, 41), {
anchor: newBMap.Size(4, 36)
})}));
}//添加终点覆盖物
functionaddEnd(point, title){
map.addOverlay(newBMap.Marker(point, {
title: title,
icon: newBMap.Icon('red.png', newBMap.Size(38, 41), {
　anchor: newBMap.Size(4, 36)
})}));
}//添加路线
functionaddRoute(path){
map.addOverlay(newBMap.Polyline(path, {
strokeColor: '#333',
enableClicking: false}));
}</script>
</body>
</html>

在上面的代码中，我们初始化DrivingRoute实例时没有设置renderOptions，也就是说驾车导航的结果不会自动添加到地图上，描述信息也不会展现在页面中，我们通过onSearchComplete获取数据自行添加。onSearchComplete回调函数的参数为一个DrivingRouteResult对象，通过它可以获取数据信息。在回调函数中我们首先判断一下检索是否成功，如果成功则添加覆盖物和描述信息。在添加覆盖物完成后，我们调用了Map的setViewport方法来设置视野，以便让结果完整展示在地图当中。在获取方案的时候我们调用getPlan方法并给定索引0，这表示获取第一条驾车方案（实际上目前仅有一条驾车方案，但是以后可能会同时给出多条方案）。每个方案通过RoutePlan描述，方案中会包含若干Route对象，它表示两点间的线路（在只有一个目的地的情况下，Route对象数量总为1），Route对象又包含若干Step，通过getStep方法可获得，Step对象描述了每一个关键点的信息。

以上代码在浏览器中的效果如下：

通过接口，你还可以进一步丰富这个功能，比如增加一些点击交互。

需要注意的问题

搜索没有结果

如果检索关键字过于模糊，比如从“麦当劳”到“肯德基”，这样API不知道从哪个麦当劳到哪个肯德基，所以此时将无法获取导航线路。为了让导航返回更准确的结果，建议使用坐标发起检索。

发起新检索后地图没有清除上一次结果

在一般情况下，你只需要一个DrivingRoute实例做检索，同一个实例在检索的时候会自动清除上一次检索的结果（包括地图覆盖物和描述）。但是如果每次检索都new一个新的DrivingRoute实例，那么每个实例的检索结果都会出现在地图上，无法自动清除。

【本文首发于：百度互联网技术官方博客】

【关注百度技术沙龙】

本文转自百度技术51CTO博客，原文链接：http://blog.51cto.com/baidutech/744327，如需转载请自行联系原作者

详解百度地图API之驾车导航相关推荐

使用百度地图API实现驾车导航
前面两篇文章提到了使用百度API实现定位等功能,现在做了一个利用百度地图API实现驾车导航的功能,不仅仅是驾车导航,利用这套API还可以实现公交以及步行的导航功能,这里只介绍如何实现驾车导航,步行和公 ...
详解百度地图API之地图标注
本文将向大家介绍百度地图API的标注(Marker)的使用方法和一些实现细节. 标注概述标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息.比如你在西单商场位置添加了一个 ...
html加载百度地图,百度地图API详解之地图API加载方式
本文将向大家介绍百度地图API的两种不同加载方式:同步加载和异步加载. 同步加载这是最常见的加载方式,开发者需要在页面的head标签内添加一个script标签,标签的src属性填写为地图API的地址 ...
Android 不归路之百度地图API学习（导航篇）
在学习百度地图api 导航篇时不论怎么仿写官方DEMO 都不能初始化导航引擎纠结了两天在LBS论坛上找到同样问题传送门初始化导航失败文中解决方法主要有三种: 目前demo中初始化导航失败有 ...
百度地图api 自定义驾车线路规划车辆实时定位
项目需求根据百度api给出的接口实现从始发地→目的地线路规划以及车辆的实时位置跟踪定位 1.首先引入百度API <script type="text/javascript& ...
android百度地图箭头,百度地图API绘制带头箭头的折线
源代码: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;wid ...
【百度地图API】如何制作多途经点的线路导航——驾车篇
摘要: 休假结束,酸奶×××要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----------------------------------- ...
【百度地图API】制作多途经点的线路导航——路线坐标规划
一.创建地图大家跟我一起来创建一张简单的地图: var map = new BMap.Map("container"); map.centerAndZoom(new BMap.P ...
android 百度地图驾车导航,百度地图API详解之驾车导航
本文将向大家介绍如何使用百度地图API提供的驾车导航服务进行开发. 一个简单的示例驾车导航服务根据传入的起点和终点信息给出从起点到终点的驾车路线,我们先从一个最简单的示例看起: var map = ...
php开发地图导航,百度地图API使用方法详解
最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图api完成了一个例子. 示例一: body, html,#allmap {width: 100%;height: ...

详解百度地图API之驾车导航

详解百度地图API之驾车导航相关推荐

最新文章

热门文章