html地图导航代码例子,js 实现百度地图导航例子

【实例简介】百度地图路径规划

【实例截图】

【核心代码】

body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}

#l-map{height:300px;width:100%;}

#r-result{width:100%; font-size:14px; line-height:20px;}

驾车导航的数据接口

// 百度地图API功能

var map = new BMap.Map("l-map");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);

var options = {

renderOptions: {

map: map,

panel: "r-result",

enableDragging : true //起终点可进行拖拽

},

onSearchComplete: function(results){

if (driving.getStatus() == BMAP_STATUS_SUCCESS){

// 获取第一条方案

var plan = results.getPlan(0);

// 获取方案的驾车线路

var route = plan.getRoute(0);

// 获取每个关键步骤,并输出到页面

var s = [];

for(var j = 0;j < plan.getNumRoutes(); j ){

var route = plan.getRoute(j);

for (var i = 0; i < route.getNumSteps(); i ){

var step = route.getStep(i);

//alert("lat:" step.Th.lat ";lng:" step.Th.lng);

s.push((i 1) ". " step.getDescription());

}

}

//document.getElementById("r-result").innerHTML = s.join("
");

}

}

};

var driving = new BMap.DrivingRoute(map, options);

driving.search("天安门", "百度大厦",{waypoints:['西直门','德胜门']});