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

简介: 原文:【百度地图API】如何制作自定义样式的公交导航结果面板?摘要:   百度地图API有默认的公交导航结果面板,但样式比较单一;而百度地图上的结果面板就比较美观。如何利用百度地图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米

终点

目录
相关文章
|
15天前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
146 0
|
15天前
|
敏捷开发 API
【sgCreateAPI】自定义小工具:敏捷开发→自动化生成API接口脚本(接口代码生成工具)
【sgCreateAPI】自定义小工具:敏捷开发→自动化生成API接口脚本(接口代码生成工具)
|
15天前
|
人工智能 关系型数据库 Serverless
Serverless 应用引擎常见问题之API生成的函数镜像改为自定义的镜像如何解决
Serverless 应用引擎(Serverless Application Engine, SAE)是一种完全托管的应用平台,它允许开发者无需管理服务器即可构建和部署应用。以下是Serverless 应用引擎使用过程中的一些常见问题及其答案的汇总:
|
13天前
|
定位技术 API
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
|
15天前
|
缓存 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义绘制与Canvas API
【4月更文挑战第30天】Flutter允许开发者通过`CustomPaint`和`CustomPainter`进行自定义绘制,以实现丰富视觉效果。`CustomPaint` widget将`CustomPainter`应用到画布,而`CustomPainter`需实现`paint`和`shouldRepaint`方法。`paint`用于绘制图形,如示例中创建的`MyCirclePainter`绘制蓝色圆圈。Canvas API提供绘制形状、路径、文本和图片等功能。注意性能优化,避免不必要的重绘和利用缓存提升效率。自定义绘制让Flutter UI更具灵活性和个性化,但也需要图形学知识和性能意识。
【Flutter前端技术开发专栏】Flutter中的自定义绘制与Canvas API
|
15天前
|
前端开发 API 开发者
React Hooks API:自定义Hooks的创建与使用
【4月更文挑战第25天】本文介绍了React自定义Hooks的创建与使用。自定义Hooks是提升React开发效率的关键工具。
|
15天前
|
NoSQL Java API
SpringBoot项目中防止表单重复提交的两种方法(自定义注解解决API接口幂等设计和重定向)
SpringBoot项目中防止表单重复提交的两种方法(自定义注解解决API接口幂等设计和重定向)
90 0
|
15天前
|
自然语言处理 API 语音技术
Python加百度语音API实现文字转语音功能
Python加百度语音API实现文字转语音功能
68 0
|
15天前
|
容器
百度富文本上传图片后样式崩塌
百度富文本上传图片后样式崩塌
38 0
百度富文本上传图片后样式崩塌
|
5月前
|
定位技术 API
百度地图API的使用教程以及案例(二)
百度地图API的使用教程以及案例