多终点的公交路线
2015-10-22 18:32
281 查看
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>多终点选择的公交换乘查询</title>
<style>
.opMap{width:960px;margin:0 auto;position:relative;}.opTitle{color:#CC5522}.opResultPanel{width:20%;height:100%x;position:absolute;right:0;top:0;}.opStart{background: url("http://map.baidu.com/img/sel_body_y_top.gif")
repeat-x scroll 0 0 transparent;height: 31px;border:solid 1px #9CB6FF;}.sel_body_sign {background: url("http://map.baidu.com/img/bgs.gif") no-repeat scroll -167px -387px transparent;float: left;height:
31px;width: 40px;}.sel_body_title {height: 31px;border:solid 1px #FAD1A6;}.sel_n.sel_body_sign {background: url("http://map.baidu.com/img/bgs.gif") no-repeat scroll -79px -387px transparent;float:
left;height: 31px;width: 40px;}.opEnd{border:solid 1px #FAD1A6;} .opStart h4, .opEnd h4{line-height:31px;font-size:14px;margin:0;}.opMap h4{width:200px;font-size:12px;margin:0;float:left;clear:right;}.opEndBody{height:337px;overflow-y:auto;}
</style>
</head>
<body>
<div id="l-map" style="width:700px"></div>
<div id="r-result" style="width:250px"></div>
<div class="opResultPanel"><div id="start" class="opStart"><span class="sel_body_sign"></span><h4>起点：天安门</h4></div><div id="endSelect" class="opEnd"><div class="sel_body_title"> <div id="opNSign" class="sel_n sel_body_sign"></div><div class="sel_body_name"><h4>终点：<b
id="B_PointName1">餐馆</b></h4></div></div> <div id="endingBody" class="opEndBody" ></div></div></div><div id="routePanel"></div></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
(function(){
/**
* @namespace T Tangram七巧板
* @name T
* @version 1.3.9
*/
/**
* 声明baidu包
* @author: allstar, erik, meizz, berg
*/
var T,
baidu = T = baidu || {version: "1.3.9"};
//提出guid，防止在与老版本Tangram混用时
//在下一行错误的修改window[undefined]
baidu.guid = "$BAIDU$";
//Tangram可能被放在闭包中
//一些页面级别唯一的属性，需要挂载在window[baidu.guid]上
window[baidu.guid] = window[baidu.guid] || {};
/**
* @namespace baidu.array 操作数组的方法。
*/
baidu.array = baidu.array || {};
/**
* 遍历数组中所有元素
* @name baidu.array.each
* @function
* @grammar baidu.array.each(source, iterator[, thisObject])
* @param {Array} source 需要遍历的数组
* @param {Function} iterator 对每个数组元素进行调用的函数，该函数有两个参数，第一个为数组元素，第二个为数组索引值，function (item, index)。
* @param {Object} [thisObject] 函数调用时的this指针，如果没有此参数，默认是当前遍历的数组
* @remark
* each方法不支持对Object的遍历,对Object的遍历使用baidu.object.each 。
* @shortcut each
* @meta standard
*
* @returns {Array} 遍历的数组
*/
baidu.each = baidu.array.forEach = baidu.array.each = function (source, iterator, thisObject) {
var returnValue, item, i, len = source.length;
if ('function' == typeof iterator) {
for (i = 0; i < len; i++) {
item = source[i];
//此处实现和标准不符合，标准中是这样说的：
//If a thisObject parameter is provided to forEach, it will be used as the this for each invocation of the callback. If it is not provided, or is null, the global object associated with callback is used instead.
returnValue = iterator.call(thisObject || source, item, i);
if (returnValue === false) {
break;
}
}
}
return source;
};
/**
* @namespace baidu.dom 操作dom的方法。
*/
baidu.dom = baidu.dom || {};
/**
* 从文档中获取指定的DOM元素
* @name baidu.dom.g
* @function
* @grammar baidu.dom.g(id)
* @param {string|HTMLElement} id 元素的id或DOM元素
* @shortcut g,T.G
* @met
4000
a standard
* @see baidu.dom.q
*
* @returns {HTMLElement|null} 获取的元素，查找不到时返回null,如果参数不合法，直接返回参数
*/
baidu.dom.g = function (id) {
if ('string' == typeof id || id instanceof String) {
return document.getElementById(id);
} else if (id && id.nodeName && (id.nodeType == 1 || id.nodeType == 9)) {
return id;
}
return null;
};
// 声明快捷方法
baidu.g = baidu.G = baidu.dom.g;
/**
* 获取目标元素的直接子元素列表
* @name baidu.dom.children
* @function
* @grammar baidu.dom.children(element)
* @param {HTMLElement|String} element 目标元素或目标元素的id
* @meta standard
*
* @returns {Array} 目标元素的子元素列表，没有子元素时返回空数组
*/
baidu.dom.children = function (element) {
element = baidu.dom.g(element);
for (var children = [], tmpEl = element.firstChild; tmpEl; tmpEl = tmpEl.nextSibling) {
if (tmpEl.nodeType == 1) {
children.push(tmpEl);
}
}
return children;
};
/**
* 移除目标元素的className
* @name baidu.dom.removeClass
* @function
* @grammar baidu.dom.removeClass(element, className)
* @param {HTMLElement|string} element 目标元素或目标元素的id
* @param {string} className 要移除的className，允许同时移除多个class，中间使用空白符分隔
* @remark
* 使用者应保证提供的className合法性，不应包含不合法字符，className合法字符参考：http://www.w3.org/TR/CSS2/syndata.html。
* @shortcut removeClass
* @meta standard
* @see baidu.dom.addClass
*
* @returns {HTMLElement} 目标元素
*/
baidu.dom.removeClass = function (element, className) {
element = baidu.dom.g(element);
var oldClasses = element.className.split(/\s+/),
newClasses = className.split(/\s+/),
lenOld,
lenDel = newClasses.length,
j,
i = 0;
//考虑到同时删除多个className的应用场景概率较低,故放弃进一步性能优化
// by rocy @1.3.4
for (; i < lenDel; ++i){
for(j = 0, lenOld = oldClasses.length; j < lenOld; ++j){
if(oldClasses[j] == newClasses[i]){
oldClasses.splice(j, 1);
break;
}
}
}
element.className = oldClasses.join(' ');
return element;
};
// 声明快捷方法
baidu.removeClass = baidu.dom.removeClass;
/**
* @namespace baidu.event 屏蔽浏览器差异性的事件封装。
* @property target 事件的触发元素
* @property pageX 鼠标事件的鼠标x坐标
* @property pageY 鼠标事件的鼠标y坐标
* @property keyCode 键盘事件的键值
*/
baidu.event = baidu.event || {};
/**
* 事件监听器的存储表
* @private
* @meta standard
*/
baidu.event._listeners = baidu.event._listeners || [];
/**
* 为目标元素添加事件监听器
* @name baidu.event.on
* @function
* @grammar baidu.event.on(element, type, listener)
* @param {HTMLElement|string|window} element 目标元素或目标元素id
* @param {string} type 事件类型
* @param {Function} listener 需要添加的监听器
* @remark
*
1. 不支持跨浏览器的鼠标滚轮事件监听器添加<br>
2. 改方法不为监听器灌入事件对象，以防止跨iframe事件挂载的事件对象获取失败
* @shortcut on
* @meta standard
* @see baidu.event.un
*
* @returns {HTMLElement|window} 目标元素
*/
baidu.event.on = function (element, type, listener) {
type = type.replace(/^on/i, '');
element = baidu.dom.g(element);
var realListener = function (ev) {
// 1. 这里不支持EventArgument, 原因是跨frame的事件挂载
// 2. element是为了修正this
listener.call(element, ev);
},
lis = baidu.event._listeners,
filter = baidu.event._eventFilter,
afterFilter,
realType = type;
type = type.toLowerCase();
// filter过滤
if(filter && filter[type]){
afterFilter = filter[type](element, type, realListener);
realType = afterFilter.type;
realListener = afterFilter.listener;
}
// 事件监听器挂载
if (element.addEventListener) {
element.addEventListener(realType, realListener, false);
} else if (element.attachEvent) {
element.attachEvent('on' + realType, realListener);
}
// 将监听器存储到数组中
lis[lis.length] = [element, type, listener, realListener, realType];
return element;
};
// 声明快捷方法
baidu.on = baidu.event.on;
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
map.enableScrollWheelZoom();
var start = "魏公村" ,end = "餐馆";
var transit = new BMap.TransitRoute(map, {
renderOptions: {map: map},
onSearchComplete: function(result){
if(!result.getPlan()){//没有结果，用localsearch检索终点
var result;
var local = new BMap.LocalSearch(map,
{renderOptions:{map:null,panel:"r-result"},
onSearchComplete: function(r){
result = r;
},
onResultsHtmlSet: function(){
getNthPage(result);
}
});
local.search(end);
}
}
});
transit.search(start,end);
function searchAgain(start,end){
var newTransit = new BMap.TransitRoute(map,{renderOptions:{map:map,panel:"endingBody"},
onSearchComplete: function(rslt){
if(!rslt || rslt.getNumPlans() < 1){
T.G("endingBody").innerHTML = "未发现公交路线";//相当于jquery的$("#endingBody")
}
}
});
map.clearOverlays();
newTransit.search(start,end); //search bus route according to user's select
}
function getNthPage(result){
var len = result.getCurrentNumPois();
map.clearOverlays();
for(var i = 0 ; i < len ; i ++){
var tLocalPoi = result.getPoi(i);
//自定义icon
var customIcon =new BMap.Icon("http://app.baidu.com/map/images/custom_a_j.png",new BMap.Size(28,37),
{
offset: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0 - i * 28, 0)
}
);
var marker = new BMap.Marker(tLocalPoi.point,{icon:customIcon});
//var marker = new BMap.Marker(tLocalPoi.point);
map.addOverlay(marker);
openInfoWin(tLocalPoi,i,marker);
}
T.each(T.G("endingBody").getElementsByTagName("li"),function(item,i){//遍历li绑定事件，相当于jquery的$(#endingBody li).each()
T.event.on(item,"click",function(e){
end = result.getPoi(i) ; //被click的 localResultPoi
setEndPoiName(T.dom.children(this)[1].innerHTML);
T.removeClass("opNSign","sel_n");
searchAgain(start,end);//重新发起检索 //loopingtest
});
});
function openInfoWin(tLocalPoi,i,marker){//closure 绑定infowindow
(function(i){
var infoWindow = new BMap.InfoWindow('<input id="busEnd" type="button" value="设为终点" />');
infoWindow.setTitle("<span class='opTitle'>"+ tLocalPoi.title +"</span>");
marker.addEventListener("click",function(evt){
end = result.getPoi(i); //被click的 localResultPoi
map.openInfoWindow(infoWindow,end.point);
document.getElementById("busEnd").onclick = function(){
setEndPoiName(end.title);
searchAgain(start,end);////loopingtest
}
});
})(i);
}
}
function setEndPoiName(name){
T.G("B_PointName1").innerHTML = name;
}
})();
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>多终点选择的公交换乘查询</title>
<style>
.opMap{width:960px;margin:0 auto;position:relative;}.opTitle{color:#CC5522}.opResultPanel{width:20%;height:100%x;position:absolute;right:0;top:0;}.opStart{background: url("http://map.baidu.com/img/sel_body_y_top.gif")
repeat-x scroll 0 0 transparent;height: 31px;border:solid 1px #9CB6FF;}.sel_body_sign {background: url("http://map.baidu.com/img/bgs.gif") no-repeat scroll -167px -387px transparent;float: left;height:
31px;width: 40px;}.sel_body_title {height: 31px;border:solid 1px #FAD1A6;}.sel_n.sel_body_sign {background: url("http://map.baidu.com/img/bgs.gif") no-repeat scroll -79px -387px transparent;float:
left;height: 31px;width: 40px;}.opEnd{border:solid 1px #FAD1A6;} .opStart h4, .opEnd h4{line-height:31px;font-size:14px;margin:0;}.opMap h4{width:200px;font-size:12px;margin:0;float:left;clear:right;}.opEndBody{height:337px;overflow-y:auto;}
</style>
</head>
<body>
<div id="l-map" style="width:700px"></div>
<div id="r-result" style="width:250px"></div>
<div class="opResultPanel"><div id="start" class="opStart"><span class="sel_body_sign"></span><h4>起点：天安门</h4></div><div id="endSelect" class="opEnd"><div class="sel_body_title"> <div id="opNSign" class="sel_n sel_body_sign"></div><div class="sel_body_name"><h4>终点：<b
id="B_PointName1">餐馆</b></h4></div></div> <div id="endingBody" class="opEndBody" ></div></div></div><div id="routePanel"></div></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
(function(){
/**
* @namespace T Tangram七巧板
* @name T
* @version 1.3.9
*/
/**
* 声明baidu包
* @author: allstar, erik, meizz, berg
*/
var T,
baidu = T = baidu || {version: "1.3.9"};
//提出guid，防止在与老版本Tangram混用时
//在下一行错误的修改window[undefined]
baidu.guid = "$BAIDU$";
//Tangram可能被放在闭包中
//一些页面级别唯一的属性，需要挂载在window[baidu.guid]上
window[baidu.guid] = window[baidu.guid] || {};
/**
* @namespace baidu.array 操作数组的方法。
*/
baidu.array = baidu.array || {};
/**
* 遍历数组中所有元素
* @name baidu.array.each
* @function
* @grammar baidu.array.each(source, iterator[, thisObject])
* @param {Array} source 需要遍历的数组
* @param {Function} iterator 对每个数组元素进行调用的函数，该函数有两个参数，第一个为数组元素，第二个为数组索引值，function (item, index)。
* @param {Object} [thisObject] 函数调用时的this指针，如果没有此参数，默认是当前遍历的数组
* @remark
* each方法不支持对Object的遍历,对Object的遍历使用baidu.object.each 。
* @shortcut each
* @meta standard
*
* @returns {Array} 遍历的数组
*/
baidu.each = baidu.array.forEach = baidu.array.each = function (source, iterator, thisObject) {
var returnValue, item, i, len = source.length;
if ('function' == typeof iterator) {
for (i = 0; i < len; i++) {
item = source[i];
//此处实现和标准不符合，标准中是这样说的：
//If a thisObject parameter is provided to forEach, it will be used as the this for each invocation of the callback. If it is not provided, or is null, the global object associated with callback is used instead.
returnValue = iterator.call(thisObject || source, item, i);
if (returnValue === false) {
break;
}
}
}
return source;
};
/**
* @namespace baidu.dom 操作dom的方法。
*/
baidu.dom = baidu.dom || {};
/**
* 从文档中获取指定的DOM元素
* @name baidu.dom.g
* @function
* @grammar baidu.dom.g(id)
* @param {string|HTMLElement} id 元素的id或DOM元素
* @shortcut g,T.G
* @met
4000
a standard
* @see baidu.dom.q
*
* @returns {HTMLElement|null} 获取的元素，查找不到时返回null,如果参数不合法，直接返回参数
*/
baidu.dom.g = function (id) {
if ('string' == typeof id || id instanceof String) {
return document.getElementById(id);
} else if (id && id.nodeName && (id.nodeType == 1 || id.nodeType == 9)) {
return id;
}
return null;
};
// 声明快捷方法
baidu.g = baidu.G = baidu.dom.g;
/**
* 获取目标元素的直接子元素列表
* @name baidu.dom.children
* @function
* @grammar baidu.dom.children(element)
* @param {HTMLElement|String} element 目标元素或目标元素的id
* @meta standard
*
* @returns {Array} 目标元素的子元素列表，没有子元素时返回空数组
*/
baidu.dom.children = function (element) {
element = baidu.dom.g(element);
for (var children = [], tmpEl = element.firstChild; tmpEl; tmpEl = tmpEl.nextSibling) {
if (tmpEl.nodeType == 1) {
children.push(tmpEl);
}
}
return children;
};
/**
* 移除目标元素的className
* @name baidu.dom.removeClass
* @function
* @grammar baidu.dom.removeClass(element, className)
* @param {HTMLElement|string} element 目标元素或目标元素的id
* @param {string} className 要移除的className，允许同时移除多个class，中间使用空白符分隔
* @remark
* 使用者应保证提供的className合法性，不应包含不合法字符，className合法字符参考：http://www.w3.org/TR/CSS2/syndata.html。
* @shortcut removeClass
* @meta standard
* @see baidu.dom.addClass
*
* @returns {HTMLElement} 目标元素
*/
baidu.dom.removeClass = function (element, className) {
element = baidu.dom.g(element);
var oldClasses = element.className.split(/\s+/),
newClasses = className.split(/\s+/),
lenOld,
lenDel = newClasses.length,
j,
i = 0;
//考虑到同时删除多个className的应用场景概率较低,故放弃进一步性能优化
// by rocy @1.3.4
for (; i < lenDel; ++i){
for(j = 0, lenOld = oldClasses.length; j < lenOld; ++j){
if(oldClasses[j] == newClasses[i]){
oldClasses.splice(j, 1);
break;
}
}
}
element.className = oldClasses.join(' ');
return element;
};
// 声明快捷方法
baidu.removeClass = baidu.dom.removeClass;
/**
* @namespace baidu.event 屏蔽浏览器差异性的事件封装。
* @property target 事件的触发元素
* @property pageX 鼠标事件的鼠标x坐标
* @property pageY 鼠标事件的鼠标y坐标
* @property keyCode 键盘事件的键值
*/
baidu.event = baidu.event || {};
/**
* 事件监听器的存储表
* @private
* @meta standard
*/
baidu.event._listeners = baidu.event._listeners || [];
/**
* 为目标元素添加事件监听器
* @name baidu.event.on
* @function
* @grammar baidu.event.on(element, type, listener)
* @param {HTMLElement|string|window} element 目标元素或目标元素id
* @param {string} type 事件类型
* @param {Function} listener 需要添加的监听器
* @remark
*
1. 不支持跨浏览器的鼠标滚轮事件监听器添加<br>
2. 改方法不为监听器灌入事件对象，以防止跨iframe事件挂载的事件对象获取失败
* @shortcut on
* @meta standard
* @see baidu.event.un
*
* @returns {HTMLElement|window} 目标元素
*/
baidu.event.on = function (element, type, listener) {
type = type.replace(/^on/i, '');
element = baidu.dom.g(element);
var realListener = function (ev) {
// 1. 这里不支持EventArgument, 原因是跨frame的事件挂载
// 2. element是为了修正this
listener.call(element, ev);
},
lis = baidu.event._listeners,
filter = baidu.event._eventFilter,
afterFilter,
realType = type;
type = type.toLowerCase();
// filter过滤
if(filter && filter[type]){
afterFilter = filter[type](element, type, realListener);
realType = afterFilter.type;
realListener = afterFilter.listener;
}
// 事件监听器挂载
if (element.addEventListener) {
element.addEventListener(realType, realListener, false);
} else if (element.attachEvent) {
element.attachEvent('on' + realType, realListener);
}
// 将监听器存储到数组中
lis[lis.length] = [element, type, listener, realListener, realType];
return element;
};
// 声明快捷方法
baidu.on = baidu.event.on;
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
map.enableScrollWheelZoom();
var start = "魏公村" ,end = "餐馆";
var transit = new BMap.TransitRoute(map, {
renderOptions: {map: map},
onSearchComplete: function(result){
if(!result.getPlan()){//没有结果，用localsearch检索终点
var result;
var local = new BMap.LocalSearch(map,
{renderOptions:{map:null,panel:"r-result"},
onSearchComplete: function(r){
result = r;
},
onResultsHtmlSet: function(){
getNthPage(result);
}
});
local.search(end);
}
}
});
transit.search(start,end);
function searchAgain(start,end){
var newTransit = new BMap.TransitRoute(map,{renderOptions:{map:map,panel:"endingBody"},
onSearchComplete: function(rslt){
if(!rslt || rslt.getNumPlans() < 1){
T.G("endingBody").innerHTML = "未发现公交路线";//相当于jquery的$("#endingBody")
}
}
});
map.clearOverlays();
newTransit.search(start,end); //search bus route according to user's select
}
function getNthPage(result){
var len = result.getCurrentNumPois();
map.clearOverlays();
for(var i = 0 ; i < len ; i ++){
var tLocalPoi = result.getPoi(i);
//自定义icon
var customIcon =new BMap.Icon("http://app.baidu.com/map/images/custom_a_j.png",new BMap.Size(28,37),
{
offset: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0 - i * 28, 0)
}
);
var marker = new BMap.Marker(tLocalPoi.point,{icon:customIcon});
//var marker = new BMap.Marker(tLocalPoi.point);
map.addOverlay(marker);
openInfoWin(tLocalPoi,i,marker);
}
T.each(T.G("endingBody").getElementsByTagName("li"),function(item,i){//遍历li绑定事件，相当于jquery的$(#endingBody li).each()
T.event.on(item,"click",function(e){
end = result.getPoi(i) ; //被click的 localResultPoi
setEndPoiName(T.dom.children(this)[1].innerHTML);
T.removeClass("opNSign","sel_n");
searchAgain(start,end);//重新发起检索 //loopingtest
});
});
function openInfoWin(tLocalPoi,i,marker){//closure 绑定infowindow
(function(i){
var infoWindow = new BMap.InfoWindow('<input id="busEnd" type="button" value="设为终点" />');
infoWindow.setTitle("<span class='opTitle'>"+ tLocalPoi.title +"</span>");
marker.addEventListener("click",function(evt){
end = result.getPoi(i); //被click的 localResultPoi
map.openInfoWindow(infoWindow,end.point);
document.getElementById("busEnd").onclick = function(){
setEndPoiName(end.title);
searchAgain(start,end);////loopingtest
}
});
})(i);
}
}
function setEndPoiName(name){
T.G("B_PointName1").innerHTML = name;
}
})();
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 都是非法
- iOS图片转为NSData以及NSData转为图片
- 词法分析随笔
- 【dpdk】使用libpcap-PMD驱动收发包
- JS鼠标滑轮事件的写法和按键的事件
- 词法分析感想
- Java实现经纬度格式转化
- IKAnalyzer2012FF_u1.jar-lucene4.0简单实例
- Excel表格数据导入mysql数据库中
- (50)数组剔除元素后的乘积
- 使用Memcheck发现常见的内存问题
- mysql抢单
- 10.22记
- Android中实现蓝牙录放音
- android RecyclerView的基本介绍及用法（一）
- Unsupported major.minor version 51.0错误
- iOS中的数据传输(HTTP协议)
- BAT 批量提取文件夹内文件名
- 性能诊断：当输入一个网址后回车，实际发生什么
- 1022词法分析编写心得