公交线路
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
margin:0;
padding:0;
border:0;
font-size:14px;
font:inherit;
vertical-align:baseline;
outline:none;
}
html{
height:100%;
}
body{
height:100%;
font-family:MicrosoftYaHei,Helvitica,Verdana,Tohoma,Arial,san-serif;
-webkit-text-size-adjust:none;
font-size:14px;
}
article,section{
display:block;
}
ol,ul{
list-style:none;
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after{
content:'';
content:none;
}
strong{
font-weight:bold;
}
a,button,input{
-webkit-tap-highlight-color:rgba(255,0,0);
}
input,textarea,select,button{
-webkit-border-radius:0;
-webkit-appearance:none;
outline:none;
}
table{
border-collapse:collapse;
border-spacing:0;
}
img{
border:0;
max-width:100%;
}
a{
text-decoration:none;
color:#333;
}
a:hover{
text-decoration:none;
}
.clearfix:before,.container:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
/**/
.qzdian{
text-align:center;
font-size:14px;
line-height:14px;
padding:10px;
border-bottom:1pxsolid#d8d8d8;
}
.qzdianp{
padding:3px0;
}
.search{
position:relative;
padding:8px;
border-top:1pxsolid#d8d8d8;
border-bottom:1pxsolid#d8d8d8;
background-color:#F7F7F7;
}
.select_search{
display:block;
margin:0;
border:1pxsolid#d8d8d8;
border-radius:3px;
padding:9px18px9px8px;
font-size:14px;
z-index:2;
width:100%;
}
.jtjt{
position:absolute;
display:block;
right:18px;
top:50%;
margin-top:-6px;
border:1pxsolid#7E7E7E;
-webkit-transform:rotate(135deg);
width:8px;
height:8px;
border-left:none;
border-bottom:none;
z-index:3;
}
.fabt{
padding:2px8px;
border-top:1pxsolid#EEEEEE;
border-bottom:1pxsolid#EEEEEE;
background-color:#FCFCFC;
overflow:hidden;
display:block;
font-size:14px;
height:26px;
line-height:26px;
}
.fanr{
padding:8px8px12px10px;
display:block;
overflow:hidden;
}
.fanrp{
padding:3px0;
}
.segmented{
padding:10px8px;
background-color:#F7F7F7;
border-bottom:1pxsolid#C5C5C5;
}
.segmented-control{
position:relative;
display:table;
overflow:hidden;
font-size:12px;
font-weight:400;
background-color:#fff;
border-radius:3px;
border:1pxsolid#0076F7;
}
.segmented-control.control-item{
display:table-cell;
width:1%;
padding:5px0;
overflow:hidden;
line-height:1;
color:#0076F7;
text-align:center;
text-overflow:ellipsis;
white-space:nowrap;
border-left:1pxsolid#fff;
font-size:16px;
}
.segmented-control.control-item.active{
background-color:#0076F7;
color:#FFF;
}
.segmented-control.control-item:first-child{
border-left-width:0;
}
varmap,transfer_plans,start_marker,end_marker,station_markers=[],transfer_lines=[],walk_lines=[];
vartransferService=newqq.maps.TransferService({
location:"北京",complete:function(result){
result=result.detail;
varstart=result.start,end=result.end;
varanchor=newqq.maps.Point(6,6),size=newqq.maps.Size(24,36),start_icon=newqq.maps.MarkerImage(
'/javascript_v2/img/busmarker.png',size
),end_icon=newqq.maps.MarkerImage(
'/javascript_v2/img/busmarker.png',size,newqq.maps.Point(24,0),anchor
);
start_marker&&start_marker.setMap(null);
end_marker&&end_marker.setMap(null);
start_marker=newqq.maps.Marker({
icon:start_icon,position:start.latLng,map:map,zIndex:1
});
end_marker=newqq.maps.Marker({
icon:end_icon,position:end.latLng,zIndex:1
});
transfer_plans=result.plans;
varplans_desc=[];
for(vari=0;i
//plandesc.
varp_attributes=[
'οnclick="renderPlan('+i+')"','onmouSEOver=this.style.background="#FCFCFC"','onmouSEOut=this.style.background="#fff"','style="margin-top:-4px;cursor:pointer"'
].join('');
plans_desc.push('
'>方案'+(i+1)+'.
');
varactions=transfer_plans[i].actions;
for(varj=0;j
varaction=actions[j],img_position;
action.type==qq.maps.TransferActionType.BUS&&(
img_position='-38px0px'
);
action.type==qq.maps.TransferActionType.SUBWAY&&(
img_position='-57px0px'
);
action.type==qq.maps.TransferActionType.WALK&&(
img_position='-76px0px'
);
varaction_img='
'display:inline-block;background:url(/javascript_v2/img/busicon.png)'+
'no-repeat'+img_position+
';width:19px;height:19px">
';
plans_desc.push(action_img+action.instructions+'
');
}
plans_desc.push('
');
}
//方案文本描述
document.getElementById('plans').innerHTML=plans_desc.join('');
//渲染到地图上
renderPlan(0);
}
});
functioninit(){
getLocation();
map=newqq.maps.Map(document.getElementById("container"),{
//地图的中心地理坐标。
center:newqq.maps.LatLng(24.437734,118.093221)
//center:newqq.maps.LatLng(39.916527,116.397128)
});
calcPlan();
}
functioncalcPlan(){
varstart_name=document.getElementById("start").value.split(",");
varend_name=document.getElementById("end").value.split(",");
varpolicy=document.getElementById("policy").value;
transferService.search(newqq.maps.LatLng(start_name[1],start_name[0]),newqq.maps.LatLng(end_name[1],end_name[0]));
switch(policy){
case"较快捷":
transferService.setPolicy(qq.maps.TransferActionType.LEAST_TIME);
break;
case"少换乘":
transferService.setPolicy(qq.maps.TransferActionType.LEAST_TRANSFER);
break;
case"少步行":
transferService.setPolicy(qq.maps.TransferActionType.LEAST_WALKING);
console.log(1);
break;
case"不坐地铁":
transferService.setPolicy(qq.maps.TransferActionType.NO_SUBWAY);
break;
}
}
//清除地图上的marker
functionclearOverlay(overlays){
varoverlay;
while(overlay=overlays.pop()){
overlay.setMap(null);
}
}
functionrenderPlan(index){
varplan=transfer_plans[index],lines=plan.lines,walks=plan.walks,stations=plan.stations;
map.fitBounds(plan.bounds);
//clearoverlays;
clearOverlay(station_markers);
clearOverlay(transfer_lines);
clearOverlay(walk_lines);
varanchor=newqq.maps.Point(6,size=newqq.maps.Size(24,bus_icon=newqq.maps.MarkerImage(
'/javascript_v2/img/busmarker.png',size,newqq.maps.Point(48,anchor
),subway_icon=newqq.maps.MarkerImage(
'/javascript_v2/img/busmarker.png',newqq.maps.Point(72,anchor
);
//drawstationmarker
for(varj=0;j
varstation=stations[j];
if(station.type==qq.maps.PoiType.SUBWAY_STATION){
varstation_icon=subway_icon;
}else{
varstation_icon=bus_icon;
}
varstation_marker=newqq.maps.Marker({
icon:station_icon,position:station.latLng,zIndex:0
});
station_markers.push(station_marker);
}
//drawbusline
for(varj=0;j
varline=lines[j];
varpolyline=newqq.maps.Polyline({
path:line.path,strokeColor:'#3893F9',strokeWeight:6,map:map
});
transfer_lines.push(polyline);
}
//drawwalkline
for(varj=0;j
varwalk=walks[j];
varpolyline=newqq.maps.Polyline({
path:walk.path,strokeColor:'#3FD2A3',map:map
});
walk_lines.push(polyline);
}
}
functiongetLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}else{
x.innerHTML="浏览器不支持定位.";
}
}
functionshowPosition(position){
varlat=position.coords.latitude;
varlng=position.coords.longitude;
document.getElementById("start").value=lng+","+lat;
init();
}
起点:
终点:
公交路线
自驾导航
请选择换乘策略
较快捷
少换乘
少步行
不坐地铁
点选以下方案后，查看地图变化。
