开发者社区> 技术小美> 正文

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

简介:
+关注继续查看

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

一个简单的示例

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


  1. varmap = newBMap.Map('container');  
  2. map.centerAndZoom(newBMap.Point(116.404, 39.915), 11);  
  3. vardriving = newBMap.DrivingRoute(map, {  
  4. renderOptions: {  
  5. map: map  
  6. }  
  7. });  
  8. driving.search('圆明园''西单'); 

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

 

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


  1. vardriving = newBMap.DrivingRoute("北京", {  
  2. renderOptions: {  
  3. map: map  
  4. }  
  5. }); 

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

呈现设置

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


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

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

 

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

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


  1. vardriving = newBMap.DrivingRoute(map, {  
  2. renderOptions: {  
  3. map: map,  
  4. panel: 'panel',  
  5. enableDragging: true 
  6. }  
  7. }); 

 

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获取数据自行添加覆盖物和描述信息:


  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"/> 
  5. <title>驾车导航</title> 
  6. <script src="http://api.map.baidu.com/api?v=1.2"></script> 
  7. </head> 
  8. <body> 
  9. <div id="container"style="width:400px;height:248px"></div> 
  10. <div id="panel"style="position:absolute;left:420px;top:10px"></div> 
  11. <script> 
  12. varmap =newBMap.Map('container');  
  13. map.centerAndZoom(newBMap.Point(116.404, 39.915), 11);vardriving =newBMap.DrivingRoute(map, {  
  14. onSearchComplete: function(results){if(driving.getStatus() ==BMAP_STATUS_SUCCESS) {//地图覆盖物  
  15. addOverlays(results);//方案描述  
  16. addText(results);  
  17. }  
  18. }  
  19. });  
  20. driving.search('圆明园', '西单');//添加覆盖物并设置视野  
  21. functionaddOverlays(results) {//自行添加起点和终点varstart =results.getStart();varend =results.getEnd();  
  22. addStart(start.point, start.title);  
  23. addEnd(end.point, end.title);varviewPoints =[start.point, end.point];//获取方案varplan =results.getPlan(0);//获取方案中包含的路线for(vari =0;i <plan.getNumRoutes(); i ++) {  
  24. addRoute(plan.getRoute(i).getPath());  
  25. viewPoints.concat(plan.getRoute(i).getPath());  
  26. }//设置地图视野  
  27. map.setViewport(viewPoints, {  
  28. margins: [40, 10, 10, 10]  
  29. });  
  30. }//添加方案描述  
  31. 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);  
  32. htmls.push((j +1) +'. '+curStep.getDescription() +'<br />');  
  33. }  
  34. }varpanel =document.getElementById('panel');  
  35. panel.innerHTML =htmls.join('');  
  36. panel.style.lineHeight ='1.4em';  
  37. panel.style.fontSize ='12px';  
  38. }//添加起点覆盖物  
  39. functionaddStart(point, title){  
  40. map.addOverlay(newBMap.Marker(point, {  
  41. title: title,  
  42. icon: newBMap.Icon('blue.png', newBMap.Size(38, 41), {  
  43. anchor: newBMap.Size(4, 36)  
  44. })}));  
  45. }//添加终点覆盖物  
  46. functionaddEnd(point, title){  
  47. map.addOverlay(newBMap.Marker(point, {  
  48. title: title,  
  49. icon: newBMap.Icon('red.png', newBMap.Size(38, 41), {  
  50.  anchor: newBMap.Size(4, 36)  
  51. })}));  
  52. }//添加路线  
  53. functionaddRoute(path){  
  54. map.addOverlay(newBMap.Polyline(path, {  
  55. strokeColor: '#333',  
  56. enableClicking: false}));  
  57. }</script> 
  58. </body> 
  59. </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】如何制作一张魔兽地图!!——CS地图也可以,哈哈哈
原文:【百度地图API】如何制作一张魔兽地图!!——CS地图也可以,哈哈哈 摘要:   你玩魔兽不?你知道如何做一张魔兽地图不?!   快来看此文吧! --------------------------------------------- 一、制作魔兽地图的准备工作   其实,你只需要准备一些地图的瓦片图,就可以了。
1859 0
【百度地图API】——如何让标注自动呈现在最佳视野内
原文:【百度地图API】——如何让标注自动呈现在最佳视野内 摘要:   “我有一堆标注,不规则的散落在地图的各个地方,我想把它们展示在一个最佳视野中,怎么办呢?”一位API爱好者咨询道。 ----------------------------------------------------------------------------------------------------------------- 我们在百度地图API的类参考里,找到这个一个类,setViewport 。
1206 0
【百度地图API】如何制作多途经点的线路导航——驾车篇
原文:【百度地图API】如何制作多途经点的线路导航——驾车篇 摘要:   休假结束,酸奶小妹要从重庆驾车去北京。可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ---------------------------------------------------...
1865 0
【百度地图API】关于如何进行城市切换的三种方式
原文:【百度地图API】关于如何进行城市切换的三种方式 摘要:本文介绍了三种切换城市的方式:查询城市、城市列表和显示城市轮廓。 --------------------------------------------------------------------- 很多API爱好者问到我,如何像百度地图那样,实现各个城市之间的切换呢? 在这里,公布以下三种方式。
1133 0
【百度地图API】——如何用label制作简易的房产标签
原文:【百度地图API】——如何用label制作简易的房产标签 摘要:   最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义。有没有快速简易创建房产标签的方法呢?   答案当然是有的啦~   我们可以利用label嘛! ------------------------------------------------------------------------------- 一、创建地图 这是老生常谈的三句话,初始化地图的js。
2302 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
19982 0
【百度地图API】如何批量转换为百度经纬度
原文:【百度地图API】如何批量转换为百度经纬度 摘要:      百度地图API的官网上提供了常用坐标转换的示例。但是,一次只能转换一个,真的非常麻烦!!这里结合了官方的示例,自制一个批量转换工具,供大家参考。
1463 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23526 0
百度地图API : 自定义标注图标
百度地图API : 自定义标注图标
92 0
百度地图API : 修改marker图标(icon)
百度地图API : 修改marker图标(icon)
169 0
+关注
6819
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载