【百度地图API】如何制作自定义样式的公交导航结果面板？

原文:【百度地图API】如何制作自定义样式的公交导航结果面板？

摘要：

　　百度地图API有默认的公交导航结果面板，但样式比较单一；而百度地图上的结果面板就比较美观。如何利用百度地图API来制作一个比较美观的公交导航结果面板呢？一起来学习一下吧。

----------------------------------------------------------------------------------------------

首先，看一下百度地图上的结果面板，如下图：

再来看看百度地图API默认的结果面板：

大家发现有什么不一样的了麽？

对啦，API默认的结果面板上，没有那些好看的图标哦~~

接下来，我们要一起制作如下图一样的自定义API结果面板！

-------------------------------------------------------------------------

一、创建一个公交导航

（如何创建地图，我这里就不写了。大家记得用1.2版本就好。）

注意写上回调函数onSearchComplete，当查询成功后，调用该函数milkSearchFun。

var tansit = new BMap.TransitRoute(map, {renderOptions:{map: map, autoViewport: true}, onSearchComplete: milkSearchFun});
tansit.search("中央民族大学", "北京邮电大学");

二、判断有无换乘

判断有无换乘，可以使用判断步行路段的方法。如果步行路段为2，表示没有换乘。代码如下：

var milkRouteNum = milkPlan.getNumRoutes();   //提前判断一下，如果为2，即表示无换乘.

API逻辑分析：

以最简单的“不换乘”为例，任意公交导航包含以下三个部分：

1、步行：从起点到公交站上车车站；

2、公交：从上车车站到下车车站；

3、步行：从下车车站到终点。

粉色表示步行路段，蓝色表示公交路段。红色为起点，绿色为终点。

示意图如下：

三、使用数据接口获取公交导航数据

全部注释，我都写得很清楚了，大家可以对应类参考，仔细查看一下。

    var milkStartTitle = tansit.getResults().getStart().title;  //公交导航起点的名字
    var milkEndTitle = tansit.getResults().getEnd().title;  //公交导航终点的名字
    var milkPlan = tansit.getResults().getPlan(0);   //获取第一条公交导航
    var milkDescription = milkPlan.getDescription();    //获取第一条公交导航的全部描述（带html）
    
    var milkLine = milkPlan.getLine(0).title;       //获取公交线路（比如331路）的名称
    var milkLineGeton = milkPlan.getLine(0).getGetOnStop().title;       //获取上车点站名
    var milkLineGetoff = milkPlan.getLine(0).getGetOffStop().title;     //获取下车点站名
    
    var milkRouteStart = milkPlan.getRoute(0).getDistance();  //从起点到上车车站的距离
    var milkRouteEnd = milkPlan.getRoute(1).getDistance();      //从下车车站到终点的距离

四、打印出自定义的结果面板

获取到全部数据后，就可以自己随意定制结果面板了。

首先，打印起点milkStartTitle 和终点milkEndTitle 。

然后，按照步骤打印步行-公交-步行，这三个结果。（因为无换乘，所以有3段路。）

　　注意：如果有步行距离为0的，可以做个判断，不打印该路段。

最后，加上一些css样式。

document.getElementById("milkResult").innerHTML = 
        "<p style='background:url(start.jpg) no-repeat 0 center;padding:0 0 0 30px'><b style='color:#fff;background:#ff55cc;padding:2px;'>" + milkStartTitle + "</b></p>" + 
        "<p style='background:url(walk.jpg) no-repeat 0 center;padding:0 0 0 30px'>步行<b>" + milkRouteStart + "</b>，至" + milkStartTitle + "</p>" +
        "<p style='background:url(bus.jpg) no-repeat 0 center;padding:0 0 0 30px'>在<b>" + milkLineGeton + "</b>上车,乘坐<b>" + milkLine + "</b>,在<b>" + milkLineGetoff + "</b>下车</p>" +
        "<p style='background:url(walk.jpg) no-repeat 0 center;padding:0 0 0 30px'>步行<b>" + milkRouteEnd + "</b>，至终点</p>" +
        "<p style='background:url(end.jpg) no-repeat 0 center;padding:0 0 0 30px'><b style='color:#fff;background:#ff55cc;padding:2px;'>" + milkEndTitle + "</b></p>";

-------------------------------------------------------------------------

TIPS：

误区一、有直接的结果面板样式接口使用。

解释：只能通过数据接口来实现修改结果面板样式的目的哦~

误区二、通过控制API默认结果面板自动生成的html标签来修改样式。

解释：描述里只有<b>这样的html标签，并没有用<p>来区分公交和步行的描述，所以无法直接用css来控制哦。如下图：

------------------------------------------------------------------------

全部源代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>带样式的结果面板</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<style>
body {font-size:14px;line-height:20px;}
</style>
</head>
<body>
<div style="width:500px;height:340px;border:1px solid gray;float:left;" id="container"></div>
<div style="width:400px;height:340px;border:1px solid gray;float:left;border-left:none;"id="milkResult"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);

function milkSearchFun(){
    var milkStartTitle = tansit.getResults().getStart().title;  //公交导航起点的名字
var milkEndTitle = tansit.getResults().getEnd().title;  //公交导航终点的名字
var milkPlan = tansit.getResults().getPlan(0);   //获取第一条公交导航
var milkDescription = milkPlan.getDescription();    //获取第一条公交导航的全部描述（带html）
    
    var milkLine = milkPlan.getLine(0).title;       //获取公交线路（比如331路）的名称
var milkLineGeton = milkPlan.getLine(0).getGetOnStop().title;       //获取上车点站名
var milkLineGetoff = milkPlan.getLine(0).getGetOffStop().title;     //获取下车点站名
    
    var milkRouteNum = milkPlan.getNumRoutes();   //提前判断一下，如果为2，即表示无换乘.
var milkRouteStart = milkPlan.getRoute(0).getDistance();  //从起点到上车车站的距离
var milkRouteEnd = milkPlan.getRoute(1).getDistance();      //从下车车站到终点的距离
       
    document.getElementById("milkResult").innerHTML = 
        "<p style='background:url(start.jpg) no-repeat 0 center;padding:0 0 0 30px'><b style='color:#fff;background:#ff55cc;padding:2px;'>" + milkStartTitle + "</b></p>" + 
        "<p style='background:url(walk.jpg) no-repeat 0 center;padding:0 0 0 30px'>步行<b>" + milkRouteStart + "</b>，至" + milkStartTitle + "</p>" +
        "<p style='background:url(bus.jpg) no-repeat 0 center;padding:0 0 0 30px'>在<b>" + milkLineGeton + "</b>上车,乘坐<b>" + milkLine + "</b>,在<b>" + milkLineGetoff + "</b>下车</p>" +
        "<p style='background:url(walk.jpg) no-repeat 0 center;padding:0 0 0 30px'>步行<b>" + milkRouteEnd + "</b>，至终点</p>" +
        "<p style='background:url(end.jpg) no-repeat 0 center;padding:0 0 0 30px'><b style='color:#fff;background:#ff55cc;padding:2px;'>" + milkEndTitle + "</b></p>";
    
}

var tansit = new BMap.TransitRoute(map, {renderOptions:{map: map, autoViewport: true}, onSearchComplete: milkSearchFun});
tansit.search("故宫", "颐和园");
</script>

-------------------------------------------------------------------------

备注：

如果有“换乘”怎么办？（包含2个步行和1个公交以上的情况）

比如结果描述为：“乘坐地铁1号线，经过1站，到达东单，乘坐地铁5号线，经过1站，到达灯市口，步行约200米，到达灯市东口，乘坐110，经过5站，到达神路街，步行约240米，到达终点”

得到步行的段数是4，那么有“有3个公交段，4个步行段”。如下所示：

起点

步行：0米（起点到1号线）

公交：乘坐地铁1号线，经过1站，到达东单

步行：0米（地铁换乘，距离为0）

公交：乘坐地铁5号线，经过1站，到达灯市口

步行：200米

公交：乘坐110，经过5站，到达神路街

步行：240米

终点

【百度地图API】如何制作自定义样式的公交导航结果面板？的更多相关文章

【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
百度地图API如何给自定义覆盖物添加事件
摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...
百度地图api之如何自定义标注图标
在百度地图api中,默认的地图图标是一个红色的椭圆形.但是在项目中常常要求我们建立自己的图标,类似于我的这个操作很简单,分如下几步进行步骤一:先ps一个图标,大小要合适,如果要背景透明的,记得保存 ...
百度地图api窗口信息自定义
百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delega ...
百度地图API 海量点自定义添加信息
 <script type="text/javascript" src="http://api.map.baidu.com/a ...
【百度地图API】制作多途经点的线路导航——路线坐标规划
一.创建地图首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,大家可以采用更加简短的方式引用API的JS啦~ <script type="text/javascript&q ...
百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
[工具向]__申请,下载,使用百度地图api
前言 api即应用程序接口,在我们的日常开发中,我们不仅可以在开源代码仓库(,github,码云)中获得很大的帮助,在日常开发中占重要地位的另一个东西就是api,我们可以使用众多的第三方编写的优秀的a ...
【百度地图API】——如何用label制作简易的房产标签
原文:[百度地图API]--如何用label制作简易的房产标签摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产 ...

随机推荐

IOS上传文件开发
IOS上传文件开发在移动应用开发文件形式上传是不可缺少的,近期把IOS这块文件上传文件代码简单的整理一下.假设大家有须要安卓这边的代码,本人也能够分享给大家! QQ群:74432915 ...
使用bootbox.js（二级务必提交书面和数字到数字中国）
页面文件 <#-- 页头 --> <#assign currNav = "deposit"> <#assign title="网校充值&qu ...
Base64编码和解码
Base64这是一个二进制编码方法转换成可打印字符.主要用于邮件传输. Base64将64人物(A-Z,a-z,0-9,+,/)由于基本字符集.把所有的符号转换成字符集. 编码: 编码每次3节转为4字 ...
ASP.NET MVC 5– 采用Wijmo MVC 5模板1创建应用程序分钟
启用采用ComponentOne Studio for ASP.NET Wijmo制作MVC5应用,首先要做的就是安装pid=4&from=MVC4DOC">Studio f ...
左右TS分析流
字节.在TS流里能够填入非常多类型的数据.如视频.音频.自己定义信息等.他的包的结构为,包头为4个字节,负载为184个字节(这184个字节不一定都是有效数据.有一些可能为填充数据). 工作形式: 由于 ...
设计模式入门之装饰器模式Decorator
//装饰模式定义:动态地给一个对象加入一些额外的职责. //就添加功能来说.装饰模式比生成子类更为灵活 //这也提现了面向对象设计中的一条基本原则,即:尽量使用对象组合,而不是对象继承 //Compo ...
Spring AOP入门——概念和注意事项
AOP什么? AOP在功能方面,它是之前和之后运行一些业务逻辑,一些操作(比方记录日志.或者是推断是否有权限等),这些操作的加入.全然不耦合于原来的业务逻辑.从而对原有业务逻辑全然是透明. 也就是说. ...
Swift的74标准功能
Swift中共同拥有74个内建函数,可是在Swift官方文档("The Swift Programming Language")中仅仅记录了7中.剩下的67个都没有记录. 本文将列 ...
NPOI以及在ASP.NET MVC中的使用
NPOI以及在ASP.NET MVC中的使用 1.前言相信大家在工作中经常要遇到一些导入导出Execl操作.学习贵在分享,分享使人快乐,园子里的前辈已经有很多好的文章,鄙人也是能力有限,在这里把这些 ...
ios7 JavaScriptCore.framework
曾经想要oc调用js代码通常是通过uiwebview的stringByEvaluatingJavaScriptFromString方法,或是直接使用JavaScriptCore引擎,比如https:/ ...

【百度地图API】如何制作自定义样式的公交导航结果面板？

【百度地图API】如何制作自定义样式的公交导航结果面板？的更多相关文章

随机推荐

热门专题