<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>公交线路</title>
<style type="text/css">
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: Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif;
-webkit-text-size-adjust: none;
font-size: 14px;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
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, 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: 1px solid #d8d8d8;
}
.qzdian p {
padding: 3px 0;
}
.search {
position: relative;
padding: 8px;
border-top: 1px solid #d8d8d8;
border-bottom: 1px solid #d8d8d8;
background-color: #F7F7F7;
}
.select_search {
display: block;
margin: 0;
border: 1px solid #d8d8d8;
border-radius: 3px;
padding: 9px 18px 9px 8px;
font-size: 14px;
z-index: 2;
width: 100%;
}
.jtjt {
position: absolute;
display: block;
right: 18px;
top: 50%;
margin-top: -6px;
border: 1px solid #7E7E7E;
-webkit-transform: rotate(135deg);
width: 8px;
height: 8px;
border-left: none;
border-bottom: none;
z-index: 3;
}
.fabt {
padding: 2px 8px;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
background-color: #FCFCFC;
overflow: hidden;
display: block;
font-size: 14px;
height: 26px;
line-height: 26px;
}
.fanr {
padding: 8px 8px 12px 10px;
display: block;
overflow: hidden;
}
.fanr p {
padding: 3px 0;
}
.segmented {
padding: 10px 8px;
background-color: #F7F7F7;
border-bottom: 1px solid #C5C5C5;
}
.segmented-control {
position: relative;
display: table;
overflow: hidden;
font-size: 12px;
font-weight: 400;
background-color: #fff;
border-radius: 3px;
border: 1px solid #0076F7;
}
.segmented-control .control-item {
display: table-cell;
width: 1%;
padding: 5px 0;
overflow: hidden;
line-height: 1;
color: #0076F7;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
border-left: 1px solid #fff;
font-size: 16px;
}
.segmented-control .control-item.active {
background-color: #0076F7;
color: #FFF;
}
.segmented-control .control-item:first-child {
border-left-width: 0;
}
</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script>
var map,
transfer_plans,
start_marker,
end_marker,
station_markers = [],
transfer_lines = [],
walk_lines = [];
var transferService = new qq.maps.TransferService({
location: "北京",
complete: function(result) {
result = result.detail;
var start = result.start,
end = result.end;
var anchor = new qq.maps.Point(6, 6),
size = new qq.maps.Size(24, 36),
start_icon = new qq.maps.MarkerImage(
'http://lbs.qq.com/javascript_v2/img/busmarker.png',
size
),
end_icon = new qq.maps.MarkerImage(
'http://lbs.qq.com/javascript_v2/img/busmarker.png',
size,
new qq.maps.Point(24, 0),
anchor
);
start_marker && start_marker.setMap(null);
end_marker && end_marker.setMap(null);
start_marker = new qq.maps.Marker({
icon: start_icon,
position: start.latLng,
map: map,
zIndex: 1
});
end_marker = new qq.maps.Marker({
icon: end_icon,
position: end.latLng,
map: map,
zIndex: 1
});
transfer_plans = result.plans;
var plans_desc = [];
for (var i = 0; i < transfer_plans.length; i++) {
//plan desc.
var p_attributes = [
'onclick="renderPlan(' + i + ')"',
'onmouseover=this.style.background="#FCFCFC"',
'onmouseout=this.style.background="#fff"',
'style="margin-top:-4px;cursor:pointer"'
].join(' ');
plans_desc.push('<section ' + p_attributes +
'><b class="fabt">方案' + (i + 1) + '.</b><div class="fanr">');
var actions = transfer_plans[i].actions;
for (var j = 0; j < actions.length; j++) {
var action = actions[j],
img_position;
action.type == qq.maps.TransferActionType.BUS && (
img_position = '-38px 0px'
);
action.type == qq.maps.TransferActionType.SUBWAY && (
img_position = '-57px 0px'
);
action.type == qq.maps.TransferActionType.WALK && (
img_position = '-76px 0px'
);
var action_img = '<p><span style="margin-bottom: -4px;' +
'display:inline-block;background:url(http://lbs.qq.com/javascript_v2/img/busicon.png) ' +
'no-repeat ' + img_position +
';width:19px;height:19px"></span> ';
plans_desc.push(action_img + action.instructions + '</p>');
}
plans_desc.push('</section></div>');
}
//方案文本描述
document.getElementById('plans').innerHTML = plans_desc.join('');
//渲染到地图上
renderPlan(0);
}
});
function init() {
getLocation();
map = new qq.maps.Map(document.getElementById("container"), {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(24.437734, 118.093221)
// center: new qq.maps.LatLng(39.916527, 116.397128)
});
calcPlan();
}
function calcPlan() {
var start_name = document.getElementById("start").value.split(",");
var end_name = document.getElementById("end").value.split(",");
var policy = document.getElementById("policy").value;
transferService.search(new qq.maps.LatLng(start_name[1], start_name[0]), new qq.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
function clearOverlay(overlays) {
var overlay;
while (overlay = overlays.pop()) {
overlay.setMap(null);
}
}
function renderPlan(index) {
var plan = transfer_plans[index],
lines = plan.lines,
walks = plan.walks,
stations = plan.stations;
map.fitBounds(plan.bounds);
//clear overlays;
clearOverlay(station_markers);
clearOverlay(transfer_lines);
clearOverlay(walk_lines);
var anchor = new qq.maps.Point(6, 6),
size = new qq.maps.Size(24, 36),
bus_icon = new qq.maps.MarkerImage(
'http://lbs.qq.com/javascript_v2/img/busmarker.png',
size,
new qq.maps.Point(48, 0),
anchor
),
subway_icon = new qq.maps.MarkerImage(
'http://lbs.qq.com/javascript_v2/img/busmarker.png',
size,
new qq.maps.Point(72, 0),
anchor
);
//draw station marker
for (var j = 0; j < stations.length; j++) {
var station = stations[j];
if (station.type == qq.maps.PoiType.SUBWAY_STATION) {
var station_icon = subway_icon;
} else {
var station_icon = bus_icon;
}
var station_marker = new qq.maps.Marker({
icon: station_icon,
position: station.latLng,
map: map,
zIndex: 0
});
station_markers.push(station_marker);
}
//draw bus line
for (var j = 0; j < lines.length; j++) {
var line = lines[j];
var polyline = new qq.maps.Polyline({
path: line.path,
strokeColor: '#3893F9',
strokeWeight: 6,
map: map
});
transfer_lines.push(polyline);
}
//draw walk line
for (var j = 0; j < walks.length; j++) {
var walk = walks[j];
var polyline = new qq.maps.Polyline({
path: walk.path,
strokeColor: '#3FD2A3',
strokeWeight: 6,
map: map
});
walk_lines.push(polyline);
}
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "浏览器不支持定位.";
}
}
function showPosition(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
document.getElementById("start").value = lng + "," + lat;
init();
}
</script>
</head>
<body onload="getLocation();">
<div style="display:none"> <b>起点: </b>
<input id="start" value="">
<b>终点: </b>
<input id="end" value="118.73210, 32.0233">
</div>
<div class="segmented">
<p class="segmented-control">
<a class="platform-switch control-item active" href="">公交路线</a>
<a class="platform-switch control-item" href="">自驾导航</a>
</p>
</div>
<div style="width:100%;height:300px" id="container"></div>
<div class="search">
<select id="policy" onchange="calcPlan();" class="select_search ">
<option value="">请选择换乘策略</option>
<option value="LEAST_TIME">较快捷</option>
<option value="LEAST_TRANSFER">少换乘</option>
<option value="LEAST_WALKING">少步行</option>
<option value="NO_SUBWAY">不坐地铁</option>
</select>
<span class="jtjt"></span> </div>
<div class="qzdian">
<p>点选以下方案后，查看地图变化。</p>
</div>
<div id="plans"></div>
</body>
</html>
