效果图:
<!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(支持多起点多终点)
对百度地图api驾车、公交、步行、搜索、带检索功能的标注点数组的详细演示
百度地图iOS SDK v2.10.0 Sample共有23个Demo,每个Demo的说明如下: ------------------------------------------------------------------------------------- 一、 Demo名称:基本地图功能 文件名: ...
百度地图,显示2点间通勤路线,步行,自行车,公交车,开车.zip只要指定你的经伟度坐标即可挂接上百度地图
百度的驾车 起点终点 标注 Markers 自定义 自定义Markers多个标注 标注添加文字
这个是百度地图的公交换乘,和步行搜素,驾车搜素,并且可以搜索附近的餐馆,银行的信息,我也刚学,给大家分享一下,多多指教,谢谢……
从一个excel的xlsx表格中获取起点的地址和终点的地址,要批量计算两个地址之间的距离和驾车时间,按照百度地图的最短距离计算。最后把得出的行驶距离和驾车时间填充至xlsx表格中的相应地址,博客地址 ...
百度地图驾车途经点,更换起始点icon图标,删除途经点图标,解决10个途经点的限制。亲测好用,附赠参考地址
百度地图采用全新地图底图,拥有强大的路线查询及规划能力,支持公交、驾车、步行三种出行方式;支持浏览全国地图,支持快速定位。使用百度地图,搜索海量地点、公交、地铁等信息;搜索周边餐馆、酒店、银行、医疗等各种...
基于天地图数据编写的城市公交查询,及出行路径规划系统,可选择地铁、公交等多种出行方式。
实现百度定位导航及地图API,百度LBS相关服务已升级,请去官网查看 实现百度定位导航及地图API,百度LBS相关服务已升级,请去官网查看
查看自身位置的中心点,产看周围的各种店面在和中和位置。可以查看附近的公交搜索,周边驾车搜索。
百度地图专业导航(包括驾车、货车、摩托车和电子狗导航等等)最新demo,在官方demo基础上改进,适配Android X、Android Q、Android R。复制粘贴即可使用,相当简单。 真的是,官方代码环境配置太低,自己升级了,吐...
百度地图路径规划,驾车搜索,公交搜索,步行搜索实例
给当前位置加上地表,公交,驾车查询,方便简洁开发
8684公交查询软件,支持离线查询。 8684是一款免费的、离线使用的公交查询软件,可查询全国440多个县市的公交情况,出游时即使手机没有信号也可以使用!是爱旅游人们的出游必备软件。 8684公交网是由民间的公交爱好...
百度地图手机客户端,支持全国2800多个县市地图浏览,快速定位、搜索地点、公交、驾车和步行路线,支持离线地图下载。支持安卓、iPhone、塞班S60、Windows Mobile系统。
直接导入studio,换自己的key直接运行。包含图层,覆盖物,文字,marker覆盖物,范围内搜索,驾车/步行/公交路线,我的位置等示例
在公交、驾车规划的基础上,百度手机地图还支持用户通过“少换乘”、“少步行”等不同条件来筛选路线方案。对于搜索结果,还支持用户收藏、保存地图到本地以及通过短信、彩信发送给好友,优化体验、节省流量,更能...
分别给出了驾车,公交和步行三种方式,都查询的没有问题,但是如果写个比较模糊的地点他就识别不出来了,这样显然不能满足我的要求,我需要的是我点地图上的任意坐标,给出路线。 所以就改造了一下,不是很彻底...