html5腾讯地图自动定位,HTML5定位，腾讯地图公交导航。

公交线路

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,    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: 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;

}

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,                zIndex: 1

});

transfer_plans = result.plans;

var plans_desc = [];

for (var i = 0; i 

//plan desc.

var p_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) + '.

');

var actions = transfer_plans[i].actions;

for (var j = 0; 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 = '

'display:inline-block;background:url(http://lbs.qq.com/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);

}

});

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,            size = new qq.maps.Size(24,            bus_icon = new qq.maps.MarkerImage(

'http://lbs.qq.com/javascript_v2/img/busmarker.png',                size,                new qq.maps.Point(48,                anchor

),            subway_icon = new qq.maps.MarkerImage(

'http://lbs.qq.com/javascript_v2/img/busmarker.png',                new qq.maps.Point(72,                anchor

);

//draw station marker

for (var j = 0; 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,                zIndex: 0

});

station_markers.push(station_marker);

}

//draw bus line

for (var j = 0; 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 

var walk = walks[j];

var polyline = new qq.maps.Polyline({

path: walk.path,                strokeColor: '#3FD2A3',                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();

}

  起点: 

终点: 

公交路线

自驾导航

请选择换乘策略

较快捷

少换乘

少步行

不坐地铁

点选以下方案后，查看地图变化。