您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记
百度地图javascript接口开发-驾车路线
发布时间：2016-11-20 14:25:59编辑：雪饮阅读（）
驾车路线示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
html{height:100%;}
body{height:100%;margin:0px;padding:0px;}
#container{
clear:both;
height:100%;
width:100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=s9vYSVwPjtPFv00vuxKzoNxD"></script>
<script type="text/javascript">
BMap.Point.prototype.toString=function(){
return "当前的经度="+this.lng+",纬度="+this.lat;
}
BMap.Pixel.prototype.toString=function(){
return "当前点坐标x="+this.x+",y="+this.y;
}
var map;
function InitMap(){
map=new BMap.Map("container");
var point=new BMap.Point(104.06,30.67);//成都的经纬度点
map.centerAndZoom(point,12);
map.enableScrollWheelZoom();
var DrivingRouteOptions={
renderOptions:{
map:map,
panel:document.getElementById("result"),
selectFirstResult:true,
autoViewport:true,
highlightMode:BMAP_HIGHLIGHT_STEP//STEP开启在查询结果的div中的路线节点中点击就显示该节点的相关提示
//highlightMode:BMAP_HIGHLIGHT_ROUTE
},
policy:BMAP_DRIVING_POLICY_LEAST_TIME,
onSearchComplete:function(results){
if(drivingRoute.getStatus() != BMAP_STATUS_SUCCESS){
alert(drivingRoute.getStatus());
alert("查询失败");
}
else{
alert("查询成功");
console.log("方案个数:"+results.getNumPlans());
for(var planIndex=0;planIndex<results.getNumPlans();planIndex++){
var routePlan=results.getPlan(planIndex);
var numRoutes=routePlan.getNumRoutes();
console.log("线路个数:"+numRoutes);
console.log("该方案总距离:"+routePlan.getDistance());
console.log("该方案总时间:"+routePlan.getDuration());
for(var routeIndex=0;routeIndex<numRoutes;routeIndex++){
var route=routePlan.getRoute(routeIndex);
var numSteps=route.getNumSteps();
console.log("第"+(routeIndex+1)+"线路关键点个数:"+numSteps);
for(var stepIndex=0;stepIndex<10;stepIndex++){
var step=route.getStep(stepIndex);
var stepPoint=step.getPosition();
console.log("第"+(stepIndex+1)+"关键点地理坐标:"+stepPoint);
console.log("关键点在线路中的位置索引:"+step.getIndex());
console.log("关键点描述:"+step.getDescription());
var marker=new BMap.Marker(stepPoint,{title:"第"+(stepIndex+1)+"个关键点"});
map.addOverlay(marker);
}
}
}
}
},
onMarkersSet:function(){
alert('onMarkersSet');
},
onInfoHtmlSet:function(poi,htmlDom){
//在查询结果的div中的路线节点中点击后执行
console.log(poi);
console.log(htmlDom.innerHTML);
var marker=poi.marker;
marker.setRotation(30);//点击标注小图标时将该小图标旋转30度
marker.setTitle("起点和终点的marker");//点击气泡时设置其下标标注标题
},
onPolylinesSet:function(routes){
alert("驾车线路数组length="+routes.length);
for(var index=0;index<routes.length;index++){
var route=routes[index];
var polyline=route.getPolyline();
if(index==0)
polyline.setStrokeColor("green");
if(index==1)
polyline.setStrokeColor("blue");
if(index==2)
polyline.setStrokeColor("black");
}
},
onResultsHtmlSet:function(container){
console.log(container);
container.style.border="1px solid green";
}
};
var drivingRoute=new BMap.DrivingRoute(map,DrivingRouteOptions);
var startPoint=new BMap.Point(104.143974,30.678355);
var endPoint=new BMap.Point(104.072181,30.663508);
//精准驾车搜索
//drivingRoute.search(startPoint,endPoint);
//模糊驾车搜索
drivingRoute.search("安康","渭南",{waypoints:["西安","运城"]});
map.addEventListener("click",function(event){
console.log(event.point);
});
}
</script>
</head>
<body onLoad="InitMap();">
<div id="container"></div>
<div id="result"></div>
</body>
</html>
关键字词：百度地图api,javascript