原文:【百度地图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】如何制作自定义样式的公交导航结果面板?的更多相关文章

  1. 【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  2. 百度地图API如何给自定义覆盖物添加事件

    摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ --------- ...

  3. 百度地图api之如何自定义标注图标

    在百度地图api中,默认的地图图标是一个红色的椭圆形.但是在项目中常常要求我们建立自己的图标,类似于我的这个 操作很简单,分如下几步进行 步骤一:先ps一个图标,大小要合适,如果要背景透明的,记得保存 ...

  4. 百度地图api窗口信息自定义

    百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delega ...

  5. 百度地图API 海量点 自定义添加信息

    <!--添加百度地图--> <script type="text/javascript" src="http://api.map.baidu.com/a ...

  6. 【百度地图API】制作多途经点的线路导航——路线坐标规划

    一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,大家可以采用更加简短的方式引用API的JS啦~ <script type="text/javascript&q ...

  7. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

  8. [工具向]__申请,下载,使用百度地图api

    前言 api即应用程序接口,在我们的日常开发中,我们不仅可以在开源代码仓库(,github,码云)中获得很大的帮助,在日常开发中占重要地位的另一个东西就是api,我们可以使用众多的第三方编写的优秀的a ...

  9. 【百度地图API】——如何用label制作简易的房产标签

    原文:[百度地图API]--如何用label制作简易的房产标签 摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产 ...

随机推荐

  1. c# 操作 MongoDB 的 第三方类库 MongoRepository

    https://github.com/RobThree/MongoRepository 文档 https://github.com/RobThree/MongoRepository/wiki/Docu ...

  2. 笔试题&amp;面试题:输入一个维度,逆时针打印出一个指定矩阵

    称号:考虑到用户层面.打印出指定的矩阵,例如,一个给定的用户10,例如,下面的输出应被视为在图: 程序如下所示: #include <stdio.h> #include <mallo ...

  3. 从xcode 6 上传 App Store

    2014苹果结束了大会,ios8公布.可怜的苹果开发人员又要開始伤脑筋了. 比方提交新产品的那个iTunes connect体验就做得极烂.并且这还是本菜鸟的第一次上线提交.折寿啊 一.制作证书.ap ...

  4. 用DOS命令获取文件列表

    其实就是两个命令:dir 跟 tree 在C:盘根目录下生成了一个名为“filelist.txt”的文本文件,该文件中即包含D:盘的文件夹列表. dir d:\ >c:\filelist.txt ...

  5. 七牛对用户使用webp图片格式的使用建议

    Qiniu 七牛问题解答 Chrome浏览器是可打开WebP格式的.可是并非全部的浏览器都支持webp格式,比如360.ie等浏览器是不支持的. WebP格式,谷歌(google)开发的一种旨在加快图 ...

  6. 一个简单的RPC框架

    一个 系统模型 二.数据库代码实现 1. mkdir database cd database vim dbInit.c /* * * Database Init tool * */ #include ...

  7. 介绍一款替代SSMS的sqlserver管理工具 toad for sqlserver5.7

    原文:介绍一款替代SSMS的sqlserver管理工具 toad for sqlserver5.7 toad for sqlserver5.7 虽然SSMS很好很强大,不过有时候使用一些第三方工具可以 ...

  8. 解决UnicodeEncodeError: 'ascii' codec can't encode characters in position 问题(转)

    UnicodeEncodeError: 'ascii' codec can't encode characters in position 8-11: ordinal not in range(128 ...

  9. 数据库管理——安全管理——识别SQLServer中空密码或者弱密码的登录名

    原文:数据库管理--安全管理--识别SQLServer中空密码或者弱密码的登录名 原文译自: http://www.mssqltips.com/sqlservertip/2775/identify-b ...

  10. Android四种Activity的加载模式(转)

    建议首先阅读下面两篇文章,这样才可以更好的理解Activity的加载模式: Android的进程,线程模型: http://www.cnblogs.com/ghj1976/archive/2011/0 ...