【百度地图API】如何制作公交线路的搜索?如331路

简介: 原文:【百度地图API】如何制作公交线路的搜索?如331路摘要:   从A点到B点的公交导航大家都知道怎么做了,那么单独查询331路公交车的公交路线,如何制作呢?我们一起来学习一下~ -------------------------------------------------------...
原文: 【百度地图API】如何制作公交线路的搜索?如331路

摘要:

  从A点到B点的公交导航大家都知道怎么做了,那么单独查询331路公交车的公交路线,如何制作呢?我们一起来学习一下~

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

一、创建地图和网页样式

两句话建立地图:

var map = new BMap.Map("container");
map.centerAndZoom(
new BMap.Point(116.322, 40.003), 12);

  

然后把网页结构搭建好。有一张图片,一个文本框,一个按钮。还有一张地图。

CSS样式我就直接给出了,这里就不多说了。大家可以去W3Cschool学习~~这是我最爱的网站:http://www.w3school.com.cn/css/index.asp

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜索331路公交</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<p><img src="http://map.baidu.com/img/logo-map.gif" /><span style="display:inline-block;width:200px;">&nbsp;</span><input type="text" value="331" id="busId" />路公交&nbsp;<input type="button" value="查询" onclick="busSearch();" /></p>
<div style="clear:both">&nbsp;</div>
<div style="float:left;width:600px;height:500px;border:1px solid gray" id="container"></div>
<div id="results" style="float:left;width:300px;height:500px;font-size:13px;"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(
new BMap.Point(116.322, 40.003), 12);
</script>

  

效果图:

二、公交线路接口

先来看看百度地图API给出的接口类参考:

使用构造函数,创建一个公交线路的查询。并在renderOptions里设置查询成功后,结果的展示。

var busline = new BMap.BusLineSearch(map,{
renderOptions:{map:map,panel:
"results"},
onGetBusListComplete:
function(result){
if(result) {
var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上
busline.getBusLine(fstLine);
}
}
});

  

创建一个函数,获取到文本框中输入的“331”路公交车,(还可以输入104,或者987,注意,只能支持数字)然后,执行查询。

function busSearch(){
var busName = document.getElementById("busId").value;
busline.getBusList(busName);
}

  

效果图:

全部源代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜索331路公交</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<p><img src="http://map.baidu.com/img/logo-map.gif" /><span style="display:inline-block;width:200px;">&nbsp;</span><input type="text" value="331" id="busId" />路公交&nbsp;<input type="button" value="查询" onclick="busSearch();" /></p>
<div style="clear:both">&nbsp;</div>
<div style="float:left;width:600px;height:500px;border:1px solid gray" id="container"></div>
<div id="results" style="float:left;width:300px;height:500px;font-size:13px;"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(
new BMap.Point(116.322, 40.003), 12);

var busline = new BMap.BusLineSearch(map,{
renderOptions:{map:map,panel:
"results"},
onGetBusListComplete:
function(result){
if(result) {
var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上
busline.getBusLine(fstLine);
}
}
});
function busSearch(){
var busName = document.getElementById("busId").value;
busline.getBusList(busName);
}
</script>

  

目录
相关文章
|
9天前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
140 0
|
9天前
|
数据采集 数据挖掘 API
淘系API接口推荐:淘宝搜索列表数据接口
淘系API接口推荐:淘宝搜索列表数据接口
234 0
|
7天前
|
定位技术 API
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
|
9天前
|
JSON 搜索推荐 数据挖掘
电商数据分析的利器:电商关键词搜索API接口(标题丨图片丨价格丨链接)
淘宝关键词搜索接口为电商领域的数据分析提供了丰富的数据源。通过有效利用这一接口,企业和研究人员可以更深入地洞察市场动态,优化营销策略,并提升用户体验。随着电商平台技术的不断进步,未来的API将更加智能和个性化,为电商行业带来更多的可能性。
|
9天前
|
API
当当网按关键字搜索dangdang商品 API 返回值说明
当当网按关键字搜索商品的API返回值通常包含了搜索到的商品列表及其相关信息。具体的返回值结构可能因API版本和请求参数的不同而有所差异。以下是一个典型的当当网按关键字搜索商品API返回值的示例和说明:
|
9天前
|
机器学习/深度学习 算法 API
1688API接口推荐:1688按图搜索拍立淘数据接口
1688API接口推荐:1688按图搜索拍立淘数据接口
352 4
|
9天前
|
自然语言处理 API 语音技术
Python加百度语音API实现文字转语音功能
Python加百度语音API实现文字转语音功能
67 0
|
9天前
|
XML JSON 缓存
temu跨境电商按关键字搜索temu商品 API 返回值说明
请求参数:q=shoe&start_price=&end_price=&page=&list_id=&cat=&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=
|
9天前
|
存储 Kubernetes 容器
百度搜索:蓝易云【Kubernetes使用helm部署NFS Provisioner】
现在,你已经成功使用Helm部署了NFS Provisioner,并且可以在Kubernetes中创建使用NFS存储的PersistentVolumeClaim。
52 10
|
9天前
百度搜索:蓝易云【什么是HTTP长轮询?】
现在,HTTP长轮询逐渐被WebSocket等更高效的实时通信技术所替代,但了解HTTP长轮询仍然有助于理解实时数据推送的基本原理。
89 9