开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【百度地图API】如何制作“从这里出发”“到这里去”——公交篇

简介: 原文:【百度地图API】如何制作“从这里出发”“到这里去”——公交篇 摘要: 百度地图首页上的“从这里出发”“到这里去”,一直是开发者们很热衷的一个功能。那么,怎样结合百度的数据库,来制作这个功能呢?让我们一起来学习一下。
+关注继续查看
原文:【百度地图API】如何制作“从这里出发”“到这里去”——公交篇

摘要:

百度地图首页上的“从这里出发”“到这里去”,一直是开发者们很热衷的一个功能。那么,怎样结合百度的数据库,来制作这个功能呢?让我们一起来学习一下。

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

成品图如下:

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

零、基础知识准备

首先,我们来看看公交方案的“从这里去”“到这里来”是怎么制作的。

需要创建一个公交方案,然后使用search功能。

细心的朋友们已经看到了,search接口的start和end参数,其实是可以输入point的。

那么,“从这里出发”到天安门,就应该是search(point,“天安门”)。

从天安门出发“到这里来”,就是search(“天安门”,point)了。

专业地说,这叫做“单边检索”。就是一个参数是string字符串类型,另一个是point经纬度类型。

而这个point,正是检索出来的结果。

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

一、如何检索出地图数据

首先,创建一个检索对象。

var local = new BMap.LocalSearch(map,{onSearchComplete: searchComplete});   //构造一个查询

  

然后使用检索方法,如下:

local.search("希尔顿逸林酒店");

  

下面,写回调函数。因为AJAX的异步机制,我们需要写回调函数,才能对检索成功后的数据进行操作。

我们写这样一个函数,当检索成功后,返回第一个点,并且利用这个点进行标注的添加。

注意:开发者可以返回多个点,使用循环即可。详见《如何更改百度信息窗口》,里面有返回所有第一页10个结果的代码。

var searchComplete = function (results){
if (local.getStatus() != BMAP_STATUS_SUCCESS){
return ;
}
var point = results.getPoi(0);
addMarker(point);
}

  

标注的添加函数应该包含以下几个要点:

1、marker,就是标注的位置。(用户可自定义marker的图片,更改icon属性即可。见文章《自定义标注和信息窗口》)

2、infowindow,信息窗口信息。可以书写任意的htm内容。我取了百度数据库里的名称、地址、电话和经纬度信息。还放入了“从这里出发”“到这里去”的输入框。

3、添加标注。

4、重新设置中心点和地图级别。

//查询完毕添加自定义标注
function addMarker(point){
var marker = new BMap.Marker(point.point);
var infoWindow = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>名称:</b>"+point.title+"</br><b>地址:</b>"+point.address+"</br><b>电话:</b>"+point.phoneNumber+"<p style='border-top:1px dashed #44aa99'></p>从这里到<input type='text' id='point_start' value='天安门' style='border:1px solid #aaa;background:none;' /><input type='button' onclick='bus_start();' value='公交' /></br>从<input type='text' value='天安门' style='border:1px solid #aaa;background:none;' id='point_end' />到这里<input type='button' onclick='bus_end();' value='公交' /></div>"); // 创建信息窗口对象
map.addOverlay(marker);
setTimeout(
function(){map.centerAndZoom(point.point,14);marker.openInfoWindow(infoWindow);},500);
}

  

第一步完成以后,运行你的页面,就是这个样子啦:

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

二、公交查询语句“从这里出发”和“到这里来”

首先,创建一个公交导航的对象。

map:map  是说,把公交线路图展现在map地图上。

panel:results  是说,把结果面板,展示在results里面。注意,这里要加上引号。

var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel : "results"}});

  

创建好之后,就开始做公交查询了。

把刚才取到的经纬度,做为起点或者终点,进行公交查询。

function bus_start(){
transit.search(thisPoint , document.getElementById(
"point_start").value);
}
function bus_end(){
transit.search(document.getElementById(
"point_end").value , thisPoint);
}

  

公交查询的结果将会显示在results里面。如下图:

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

三、全部源代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<title>公交方案的单边检索</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2">
</script>
</head>
<body>
<p><input type="text" id="myPOI" value="希尔顿逸林大酒店" /><input type="button" onclick="poi_search();" value="查询地点" /></p>
<div style="clear:both;"></div>
<div style="float:left;width:520px;height:340px;border:1px solid gray" id="container"></div>
<div style="float:left;width:520px;min-height:340px;border:1px solid gray" id="results"></div>
</body>
</html>
<script type="text/javascript">
var thisPoint;
//查询完毕添加自定义标注
function addMarker(point){
var marker = new BMap.Marker(point.point);
var infoWindow = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>名称:</b>"+point.title+"</br><b>地址:</b>"+point.address+"</br><b>电话:</b>"+point.phoneNumber+"<p style='border-top:1px dashed #44aa99'></p>从这里到<input type='text' id='point_start' value='天安门' style='border:1px solid #aaa;background:none;' /><input type='button' onclick='bus_start();' value='公交' /></br>从<input type='text' value='天安门' style='border:1px solid #aaa;background:none;' id='point_end' />到这里<input type='button' onclick='bus_end();' value='公交' /></div>"); // 创建信息窗口对象
map.addOverlay(marker);
setTimeout(
function(){map.centerAndZoom(point.point,14);marker.openInfoWindow(infoWindow);},500);
}

//查询完毕的回调函数
var searchComplete = function (results){
if (local.getStatus() != BMAP_STATUS_SUCCESS){
return ;
}
var point = results.getPoi(0);
thisPoint
= point;
addMarker(point);
}

var map = new BMap.Map("container"); //创建地图容器
map.centerAndZoom(new BMap.Point(116.404, 39.915), 10); //初始化地图
map.enableScrollWheelZoom(); //启用滚轮缩放
var local = new BMap.LocalSearch(map,{onSearchComplete: searchComplete}); //构造一个查询
var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel : "results"}});

//定义三个不同的查询
function poi_search(){
map.clearOverlays();
var POI = document.getElementById("myPOI").value;
local.search(POI);
}
function bus_start(){
transit.search(thisPoint , document.getElementById(
"point_start").value);
}
function bus_end(){
transit.search(document.getElementById(
"point_end").value , thisPoint);
}
</script>

  

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

四、公交时间与距离

百度地图API的官网上有示例,请点击这里

js大概是这样写的,如下:

 output += plan.getDuration(true) + "\n";             //获取时间
output += plan.getDistance(true) + "\n"; //获取距离

  

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

五、公交方案

有三种可选,较便捷、可换乘、少步行。请查看示例

类参考如下:

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

六、公交线路与公交站信息

查询例如,“104路电车”“975路”等公交车的信息,示例请看这里

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

七、不乘地铁的公交方案(新增)

做地铁是不是很贵啊?哈哈,查看示例,返回所有不乘地铁的公交方案。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
你真的会在函数计算FC上部署springboot云上博客吗
Serverless中文名称为无服务器模式的一种云原生开发模型,可以让程序员专注于构建整个应用逻辑和运行程序,而不需要进行服务器的操心。这一部分可以理解成这样,程序员减少了不必要的工作,然后将服务器外包给各个云开发商,比如说我们现在用的众多云(阿里云微软云、亚马逊和Google云服务等)开发人员可以通过将产品开发的打包到容器当中然后进行部署即可。
23210 0
建木(Jianmu)----使用docker-compose安装部署Jianmu(建木)
建木(Jianmu)----使用docker-compose安装部署Jianmu(建木)
38 0
python 格式化、set类型和class类基础知识练习(上)
lambda 参数1,参数2,参数3:表达式 特点: 1.使用lambda关键字创建函数 2.没有名字的函数 3.匿名函数冒号后面的表达式有且只有一个,是表达式不是语句 4.自带return
23 0
专访香港科技大学教授杨强:国内的人工智能研究不能太跟风
  杨强,香港科技大学计算机科学与工程学系系主任,人工智能领域学术界的领军人物,华人界唯一的国际人工智能协会 (AAAI)councilor,IEEE 大数据期刊主编,ACM 杰出科学家。两次获得国际数据挖掘领域最高级别竞赛 KDD Cup 世界冠军。杨强教授发表论文 400 多篇,被引用超过 20000 次。   但同时,除了扎根科研界,杨强教授还是人工智能领域深入商业应用领域的顶级专家之一。目前,杨强教授担任人工智能技术与服务提供商第四范式的首席科学家,带领这家被广泛看好的人工智能公司不断取得科技突破,近期第四范式在乌镇世界互联网大会上发布了可供大部分互联网公司使用的人工智能公有云产品,
248 0
POJ 1321 棋盘问题(DFS板子题,简单搜索练习)
棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 44012   Accepted: 21375 Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别。
1229 0
【百度地图API】小学生找哥哥——小学生没钱打车,所以此为公交查询功能
原文:【百度地图API】小学生找哥哥——小学生没钱打车,所以此为公交查询功能 任务描述:   有位在魏公村附近上小学的小朋友,要去北京邮电大学找哥哥。他身上钱很少,只够坐公交的。所以,百度地图API快帮帮他吧! 如何实现:   把地图中心定在魏公村,在视野范围内搜索小学。
1245 0
+关注
杰克.陈
一个安静的程序猿~
10425
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载