百度地图 驾车/公交查询Demo（支持多起点多终点）
效果图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>百度地图-驾车/公交查询</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script src="script/jquery.min.js" type="text/javascript"></script>
<!-- http://api.map.baidu.com/api?v=2.0&ak=您的密钥" -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0B3c1575c78bfb0d1c52a0660cae3491"></script>
</head>
<body>
<div class="maincontain" id="test">
<div class="eMapsInfo">
<!--搜索控制-->
<div class="eMapsTop">
<span>线路查询</span> 从
<input class="txt" type="text" value="东方明珠" id="fromPlace" />
到<select id="endInput">
<option value="虹桥T1" selected="selected">虹桥T1</option>
<option value="虹桥T2">虹桥T2</option>
<option value="浦东机场">浦东机场</option>
</select>
驾车<input type="radio" name="rdo" checked="checked" value="0"> 公交<input name="rdo"
value="1" type="radio">
<input type="button" value="查询" id="btnSearch" />
</div>
<!--地图-->
<div class="eMaps">
<div class="boxmap" id="container">
</div>
</div>
<!--右侧选项-->
<div class="boxpanel" id="box">
<h5>
起点选择 <a href="javascript:void(0)" id="btnExpand">(展开)</a></h5>
<div id="startPanel">
</div>
<div id="drivingPanel">
</div>
</div>
<div class="clear">
</div>
</div>
</div>
<script type="text/javascript"> var setindex = 0;
var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(121.357522, 31.193063); // 创建点坐标
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别。
map.addControl(new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10) }));
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.addControl(new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }));
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>上海机场（集团）有限公司 </h4>" +
"<p style='margin:0;line-height:1.5;font-size:13px;'>地址：中国上海虹桥国际机场迎宾二路200号<br/>电话：86 21 6269 2200</p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
function getInfoW(obj) {
var startInfowin = new BMap.InfoWindow("</br>" + obj.title + "</br>" + obj.address + "<p class='t-c'><input value='选为起点' type='button' onclick='startDeter();' /></p>");
return startInfowin;
}
function getInfoW_M(obj) {
startPoint = obj.point;
map.openInfoWindow(getInfoW(obj), obj.point);
} var startResults = null;
var startPoint;
var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true, panel: 'drivingPanel'} });
var driving_trans = new BMap.TransitRoute(map, { renderOptions: { map: map, autoViewport: true, panel: 'drivingPanel'} });
var startOption = {
onSearchComplete: function (results) {
// 判断状态是否正确
if (startSearch.getStatus() == BMAP_STATUS_SUCCESS) {
startResults = results;
var s = [];
map.clearOverlays();
for (var i = 0; i < results.getCurrentNumPois(); i++) {
s.push("<div><p><a onmouseover='getInfoW_M(startResults.getPoi(" + i + "))' href='#'>");
s.push(results.getPoi(i).title);
s.push("</a></p><p>");
s.push(results.getPoi(i).address);
s.push("</p></div>");
var marker_c = new BMap.Marker(results.getPoi(i).point);
(function () {
var cur = i;
var mak = marker_c;
mak.addEventListener("click", function () {
startPoint = results.getPoi(cur).point;
this.openInfoWindow(getInfoW(results.getPoi(cur))); // 打开信息窗口
});
})(); map.addOverlay(marker_c); // 将标注添加到地图中
}
document.getElementById("startPanel").innerHTML = s.join("");
} else { startResults = null; alert("没有搜索到路线，请确定起点是否有效!"); }
}
}; //取得交通方式
function getType() {
var value = "";
var radio = document.getElementsByName("rdo");
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked == true) {
value = radio[i].value;
break;
}
}
return value;
}
function startDeter() {
map.clearOverlays();
var marker = new BMap.Marker(startPoint);
map.addOverlay(marker);
map.addOverlay(new BMap.Marker(point));
if (setindex == 0) {
driving.search(startPoint, point);
} else {
driving_trans.search(startPoint, point);
}
document.getElementById("startPanel").style.display = "none";
} //创建2个搜索实例
var startSearch = new BMap.LocalSearch(map, startOption); //搜索按钮
$("#btnSearch").click(function () {
setindex = getType();
var fromPlace = document.getElementById("fromPlace").value;
startSearch.search(fromPlace);
var toPlace = $("#endInput").val();
switch (setindex) {
case "0":
driving.search(fromPlace, toPlace);
break;
case "1":
driving_trans.search(fromPlace, toPlace);
break;
} document.getElementById("box").style.display = "block";
document.getElementById("startPanel").style.display = "block";
}); //控制收起/展开
$("#btnExpand").click(function () {
$(this).text($(this).text() == "(收起)" ? "(展开)" : "(收起)");
if ($(this).text() == "(收起)") {
$("#startPanel").show();
} else {
$("#startPanel").hide();
} });
</script>
</body>
</html>
css：
body
{
font-size: 12px;
}
#startPanel p, #endPanel p
{
margin: 0;
padding: 0;
line-height: 1.2em;
}
#startPanel div, #endPanel div
{
padding: 5px;
}
#startPanel, #endPanel
{
border: 1px solid #FA8722;
font-size: 12px;
}
h5 {
line-height: 3em;
padding: 0;
margin: 0;
}
.boxpanel
{
width: 167px;
float: right;
border: 1px solid gray;
padding: 0 2px 10px;
height: 502px;
overflow-y: auto;
}
#container
{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
.eMapsInfo
{
width: 737px;
margin: 0 auto;
padding: 20px 0;
position: relative;
}
.eMaps
{
border: 6px solid #d2e0ee;
background: #fff;
height: 502px;
width: 552px;
float: left;
}
.eMapsTop
{
height: 30px;
padding-top: 20px;
color: #333333;
font-size: 14px;
}
.boxpanel
{
width: 167px;
float: right;
border: 1px solid gray;
padding: 0 2px 10px;
height: 502px;
overflow-y: auto;
}
jquery用的1.4.2
打包下载：http://download.csdn.net/detail/a497785609/6878687
百度地图 驾车/公交查询Demo（支持多起点多终点）的更多相关文章
- iOS 百度地图 小的特点demo
先上图的样子 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDEyMzIwOA==/font/5a6L5L2T/fontsize/400/fill ...
- 使用html5获取当前手机的经纬度，并接入百度地图API，查询出当前位置
最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...
- 百度地图api公交路线，IE下跳转百度地图后中文变成乱码的解决办法
百度开放的公交路线的链接,IE跳转会出现中文变成乱码的问题.如图: //创建InfoWindow function createInfoWindow() { var desDiv = []; desD ...
- 百度地图二次开发Demo
单点标注:电子显示对应位置的图片,信息框 多点标注(批量点标注): 多点连线(基于多个点形成路径): 若须要Demo源码:请给我发邮箱 1507026255@qq.com 转载请注明小刘
- Android百度地图相关内容汇总
Android百度地图知识讲解 1.百度地图开发环境搭建 http://www.apkbus.com/android-116050-1-1.html 2.Android百度地图系列教程 h ...
- 【百度地图API】圣诞节里不会迷路的麋鹿——驾车导航
原文:[百度地图API]圣诞节里不会迷路的麋鹿--驾车导航 任务描述: 可能大家还不知道,圣诞老人是爱迷路的老爷爷! 今年圣诞节又要到了,圣诞老人又要出来送礼物了.可是,他灰常的迷路呢! 还好,他有一 ...
- 【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行
原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...
- 【百度地图API】让用户选择起点和终点的驾车导航
原文:[百度地图API]让用户选择起点和终点的驾车导航 摘要: 如果用户搜索“从机场到火车站”,使用驾车导航DrivingRoute会默认显示一条结果.但同一个城市可能有多个机场和火车站,那么,如何用 ...
- 【高德地图API】从零開始学高德JS API（五）路线规划——驾车|公交|步行
先来看两个问题:路线规划与导航有什么差别?步行导航与驾车导航有什么差别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自己定义路线规划功能,这是别家没有 ...
随机推荐
- Redis事务为什么不支持回滚
在事务运行期间,虽然Redis命令可能会执行失败,但是Redis仍然会执行事务中余下的其他命令,而不会执行回滚操作,你可能会觉得这种行为很奇怪.然而,这种行为也有其合理之处:只有当被调用的Redis命 ...
- zend studio配置调试(Xdebug方式)
1.下载xdebug http://xdebug.org/download.php 我下的是PHP 5.4 VC9 (32 bit) [当前系统php是php5.4.14(win32)版本] 2.配置 ...
- Computer Vision Tutorials from Conferences (3) -- CVPR
CVPR 2013 (http://www.pamitc.org/cvpr13/tutorials.php) Foundations of Spatial SpectroscopyJames Cogg ...
- 开始学习深度学习和循环神经网络Some starting points for deep learning and RNNs
Bengio, LeCun, Jordan, Hinton, Schmidhuber, Ng, de Freitas and OpenAI have done reddit AMA's. These ...
- CSS：CSS层叠样式表的概述
CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...
- OpenCV学习(8) 分水岭算法(2)
现在我们看看OpenCV中如何使用分水岭算法. 首先我们打开一副图像: // 打开另一幅图像 cv::Mat image= cv::imread("../to ...
- css hack 和问题
浏览器特定的选择 当你想改变一个样式在一个浏览器而不是其他这些选择是非常有用的. IE 6及以下 * html {} IE 7及以下 *:first-child+html {} * htm ...
- Morton Code
莫顿码 ,实现了一维与二维(或多维)的转换.它通过交叉存储两个数的位产生一个数,即莫顿码. 可以应用于为一个整数对产生一个唯一索引. 例如,对于坐标系中的坐标点使用莫顿编码生成的莫顿码,可以唯一索引对 ...
- Office WPS PPT如何微量调整文本框的位置
按住Alt键,用鼠标拖动文本框即可以进行微调.
- PHP 5 时区
PHP 5 时区 PHP 支持的时区 下面是 PHP 支持的时区的完整列表,这些对一些 PHP 日期函数很有用. 非洲 美洲 南极洲 北冰洋 亚洲 大西洋 大洋洲 欧洲 印度洋 太平洋 非洲 Afri ...