您的位置：首页 > Web前端 > CSS

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

2011-10-21 15:12 597 查看

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

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

大家发现有什么不一样的了麽？对啦，API默认的结果面板上，没有那些好看的图标哦~~接下来，我们要一起制作如下图一样的自定义API结果面板！

-------------------------------------------------------------------------一、创建一个公交导航

（如何创建地图，我这里就不写了。大家记得用1.2版本就好。）注意写上回调函数onSearchComplete，当查询成功后，调用该函数milkSearchFun。

tansit =  BMap.TransitRoute(map, {renderOptions:{map: map, autoViewport: }, 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米终点

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 如何百度地图高德

相关文章推荐

新的分享

章节导航