【百度地图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();
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,);marker.openInfoWindow(infoWindow);},);
}
第一步完成以后，运行你的页面，就是这个样子啦：
--------------------------------------------------------------------------------------------------------------------------------------
二、公交查询语句“从这里出发”和“到这里来”
首先，创建一个公交导航的对象。
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路”等公交车的信息，示例请看这里。
--------------------------------------------------------------------------------------------------------------------------------------
七、不乘地铁的公交方案（新增）
做地铁是不是很贵啊？哈哈，查看示例，返回所有不乘地铁的公交方案。
【百度地图API】如何制作“从这里出发”“到这里去”——公交篇的更多相关文章
- 【百度地图API】制作多途经点的线路导航——路线坐标规划
一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,大家可以采用更加简短的方式引用API的JS啦~ <script type="text/javascript&q ...
- 【百度地图API】如何制作自定义样式的公交导航结果面板？
原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...
- 【百度地图API】如何制作班级地理通讯录？LBS通讯录
原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...
- 【百度地图API】如何利用PhoneGap制作地图APP
原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...
- 【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
- 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
- 【百度地图API】如何制作公交线路的搜索？如331路
原文:[百度地图API]如何制作公交线路的搜索?如331路 摘要: 从A点到B点的公交导航大家都知道怎么做了,那么单独查询331路公交车的公交路线,如何制作呢?我们一起来学习一下~ --------- ...
- 【百度地图API】如何制作可拖拽的沿道路测距
原文:[百度地图API]如何制作可拖拽的沿道路测距 摘要: 地图测距,大家都会,不就map.getDistance麼.可是,这只能测任意两点的直线距离,用途不够实际啊.比如,我想测试北京天安门到北京后 ...
- 【百度地图API】如何制作多途经点的线路导航——驾车篇
原文:[百度地图API]如何制作多途经点的线路导航--驾车篇 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----- ...
随机推荐
- CSS十问——好奇心+刨根问底=CSSer （转）
最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限 ...
- codeforces Round #260(div2) D解决报告
D. A Lot of Games time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- Service Manager流程，派BC_REPLY，唤醒FregServer流程，返回BR_TRANSACTION_COMPLETE，睡眠等待proc->wait
本文參考<Android系统源代码情景分析>,作者罗升阳 一.service manager代码: -/Android/frameworks/base/cmd/service ...
- hdu4499 Cannon （DFS+回溯）
转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=4499 Cannon ...
- Scrum三头猪
猪和鸡在过去进入业务合作.他们都打算开一家餐厅,它的售价火腿和鸡蛋. 这想了一下时间猪,我用他的肉,鸡只是用它生下的蛋.万一生意失败,我自己的命就没,,没有不论什么影响. 1. Scrum两类关系人 ...
- WebKit介绍及总结（一）
一 . WebKit 简单介绍 Webkit 是一个开放源码的浏览器引擎 (web browser engine) ,最初的代码来自 KDE 的 KHTML 和 KJS( 均开放源码 ) .苹果公司在 ...
- iptables惹的祸
我的工作环境总是一台Mac机+在Mac机上跑的虚拟机(Virtual Box) 有一个错误我总是在犯:宿主机总是无訪问到虚拟机里的web服务. 解决方法也非常easy:那就是关闭虚拟机上的防火墙!!! ...
- unity3D实际的原始视频游戏开发系列讲座10它《战斗：外来入侵》在第一季度游戏开发
解说文件夹 <保卫战:异形入侵>游戏开发 第一讲 游戏演示和资源的介绍 第二讲 "异形"怪物的实现 第三讲 "异形"怪物生命值的体现 第四讲 ...
- Bob大叔观OO原则
Bob大叔观OO原则 上篇总结了经典的23种 设计模式,详细的解读后期会陆续的详细揭开.使用设计模式的根本原因就是为了增强代码的复用性和可维护性.而面向对象是实现代码复用的有效途径,所以这里有必要了解 ...
- Advanced Installer 制作.NetWeb部署安装包
原文:Advanced Installer 制作.NetWeb部署安装包 因为是.Net的Web应用程序,所以想用Advanced Installer 调用Dll实现安装部署. 因为我需要自己定制参数 ...