百度地图API自动定位和3种导航 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 10时,
主要适用于手机，可用于一键导航到某地址的功能。在电脑上可能无法正确定位。使用时要修改目的地为自己城市的任意坐标地址（使用百度坐标抓取系统）
代码片段(1)
1.&[代码][HTML]代码&&&&
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&
&style type="text/css"&
body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
#l-map{height: 220width:100%;}
#r-result,#r-result table{width:100%;}
.nav { width: 100%; height: 2 line-height: 2 background: #EDEDED; border: 1px solid #ADADAD;}
.nav .nav-inner{ width: 30%; margin-left: 35%;}
.nav .nav-sub { float: width: 33%;}
.nav .nav-sub a { text-decoration: }
.nav .nav-sub a i { display: inline- background: url("http://webmap1./wolfman/static/common/images/ui3/mo_banner_ba37b5d.png")}
.nav .nav-sub a.bus i { background-position: -1px -192 position: top: 2 width: 13 height: 16}
.nav .nav-sub a.driver i { background-position: -29px -194 width: 15 height: 14}
.nav .nav-sub a.walk i { background-position: -102px -189 width: 16 height: 18}
.nav .nav-sub a.bus.cur i { background-position: -15px -192 }
.nav .nav-sub a.driver.cur i { background-position: -45px -194 }
.nav .nav-sub a.walk.cur i { background-position: -120px -189}
.hide { display:}
input { font-family: "micrsoft yahei"; width: 80%; height: 2 font-size: 1 line-height: 2 border: 0 outline: 0 padding: .2em 1 margin: 0em 10%;}
.btn-group { width: 100%; border-top: 1px solid #DDD; border-bottom: 2px solid #DDD;}
button {width: 32%; text-align: border: 0; border-radius: 0; background-color: height: 44 line-height: 44 font-size: 15}
&script type="text/javascript" src="http://api./api?v=2.0&ak=FbzOyQ4YujPrZsxiQKoB07aB"&&/script&
&script type="text/javascript" src="/jquery/1.8.2/jquery.min.js"&&/script&
&title&导航示例&/title&
&div id="search"&
&input type="text" id="start" placeholder="正在定位您的位置..." style="border-bottom: 1px solid #DDD; " /&
&input type="text" id="end" value="汽车西站-公交车站" readonly="true" /&
&input type="hidden" id="start_point" value=""/&
&input type="hidden" id="end_point" value="112..214124"/&
&input type="hidden" id="start_location" value=""/&
&div class="btn-group"&
&button id="bus-search"&公交&/button&
&button id="driver-search"&驾车&/button&
&button id="walk-search"&步行&/button&
&div id="showMap" class="hide"&
&div class="nav"&
&div class="nav-inner"&
&div class="nav-sub"&&a href="#" class="bus"&&i&&/i&&/a&&/div&
&div class="nav-sub"&&a href="#" class="driver cur"&&i&&/i&&/a&&/div&
&div class="nav-sub"&&a href="#" class="walk"&&i&&/i&&/a&&/div&
&!-- &a href="javascript:;" id="reLocation"&重新导航&/a& --&
&div id="l-map"&&/div&
&div id="r-result"&&/div&
&script type="text/javascript"&
$(function(){
var ep = $("#end_point").val().split(",");
var map = new BMap.Map("l-map");
var point = new BMap.Point(ep[0], ep[1]);
map.centerAndZoom(point, 16);
// 定位对象
var geoc = new BMap.Geocoder();
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
//var mk = new BMap.Marker(r.point);
//map.addOverlay(mk);
//map.panTo(r.point);
$("#start_point").val(r.point.lng+','+r.point.lat);
setLocation(r.point);
showMap();
$("#start").attr("placeholder","请输入您的当前位置")
alert('无法定位到您的当前位置，导航失败，请手动输入您的当前位置！'+this.getStatus());
},{enableHighAccuracy: true});
$(".nav .nav-sub a").click(function(){
$(".nav .nav-sub a").removeClass('cur');
$(this).addClass('cur');
searchRoute();
$("#reLocation").click(function(){
reLocation();
$("#bus-search,#driver-search,#walk-search").click(function(){
var id = $(this).attr("id");
$(".nav .nav-sub a").removeClass('cur');
if(id == "bus-search"){
$(".nav .nav-sub a.bus").addClass('cur');
}else if(id == "driver-search"){
$(".nav .nav-sub a.driver").addClass('cur');
}else if(id == "walk-search"){
$(".nav .nav-sub a.walk").addClass('cur');
showMap();
function reLocation(){
$("#search").show();
$("#showMap").hide();
map = new BMap.Map("l-map");
function showMap(){
$("#srarch").hide();
$("#showMap").show();
searchRoute();
function setLocation(point){
geoc.getLocation(point, function(rs){
var addComp = rs.addressC
var result = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetN
$("#start").val(result);
$("#start_location").val(result);
searchRoute();
function searchRoute(s_, e_){
map = new BMap.Map("l-map");
var cur = $(".nav .nav-sub a.cur");
var type = "";
if(cur.hasClass('bus')){
type = "bus";
}else if(cur.hasClass('driver')){
type = "driver";
}else if(cur.hasClass('walk')){
type = "walk";
type = "driver";
var sl = $("#start_location").val();
var s = $("#start").val();
var sp = $("#start_point").val();
var e = $("#end").val();
var ep = $("#end_point").val();
if(s != sl){// 如果用户修改了地址（与定位的位置不一致）则使用地址搜索
}else if(sp){// 否则使用坐标搜索
var ps = sp.split(",");
var pe = ep.split(",");
s_ = new BMap.Point(ps[0], ps[1]);
e_ = new BMap.Point(pe[0], pe[1]);
if(type == "bus"){
var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
transit.search(s_, e_);
}else if(type == "driver"){
var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
driving.search(s_, e_);
}else if(type == "walk"){
var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
walking.search(s_, e_);
开源中国-程序员在线工具：
相关的代码(227)
开源从代码分享开始
苏甘霖的其它代码