百度地图API 驾车路线的自定义绘制

musicbox95351

浏览: 229321 次
性别:
来自: 武汉

最近访客更多访客>>

SweetJerry

willfz

schlang

jnssvh

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

百度地图 API

下面的代码解决了自定义绘制驾车路线、调整视野以便显示起点和终点、自定义起点终点的标记。
http://www.cnblogs.com/jz1108/archive/2011/09/23/2185444.html

引用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>驾车导航</title>
<script src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div id="container" style="width:400px;height:248px"></div>
<div id="panel" style="position:absolute;left:420px;top:10px"></div>
<script>
var map =new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

var driving =new BMap.DrivingRoute(map, {
    onSearchComplete: function(results){
        if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
            // 地图覆盖物
            addOverlays(results);
            // 方案描述
            addText(results);
        }
    }
});

driving.search('圆明园', '西单');

// 添加覆盖物并设置视野
function addOverlays(results) {
    // 自行添加起点和终点
var start = results.getStart();
    var end = results.getEnd();
    addStart(start.point, start.title);
    addEnd(end.point, end.title);
    var viewPoints = [start.point, end.point];
    // 获取方案
var plan = results.getPlan(0);
    // 获取方案中包含的路线
for (var i =0; i < plan.getNumRoutes(); i ++) {
        addRoute(plan.getRoute(i).getPath());
        viewPoints.concat(plan.getRoute(i).getPath());
    }
    // 设置地图视野
    map.setViewport(viewPoints, {
        margins: [40, 10, 10, 10]
    });
}

// 添加方案描述
function addText(results) {
    var plan = results.getPlan(0);
    // 获取方案中包含的路线
var htmls = [];
    for (var i =0; i < plan.getNumRoutes(); i ++) {
        var route = plan.getRoute(i);
        for (var j =0; j < route.getNumSteps(); j ++) {
            var curStep = route.getStep(j);
            htmls.push((j +1) +'. '+ curStep.getDescription() +'<br />');
        }
    }
    var panel = document.getElementById('panel');
    panel.innerHTML = htmls.join('');
    panel.style.lineHeight ='1.4em';
    panel.style.fontSize ='12px';
}

// 添加起点覆盖物
function addStart(point, title){
    map.addOverlay(new BMap.Marker(point, {
        title: title,
        icon: new BMap.Icon('blue.png', new BMap.Size(38, 41), {
            anchor: new BMap.Size(4, 36)
        })}));
}

// 添加终点覆盖物
function addEnd(point, title){
    map.addOverlay(new BMap.Marker(point, {
        title: title,
        icon: new BMap.Icon('red.png', new BMap.Size(38, 41), {
            anchor: new BMap.Size(4, 36)
        })}));
}

// 添加路线
function addRoute(path){
    map.addOverlay(new BMap.Polyline(path, {
        strokeColor: '#333',
        enableClicking: false
    }));
}
</script>
</body>
</html>

以下是自定义绘制驾车路线的完整代码

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    <title>导航测试</title>
    </head>
    <body>
    <div id="mapDiv" style="width:600px;height:500px"></div>
    </body>
    
    <script type="text/javascript">
    var map= new BMap.Map('mapDiv');
    var point = new BMap.Point(106.674, 26.580); 
    map.centerAndZoom(point , 10);
    map.addControl(new BMap.NavigationControl()); 
    map.addControl(new BMap.ScaleControl());  

	var options = {
	  onSearchComplete: function(results){
	    if (driving.getStatus() == BMAP_STATUS_SUCCESS){
	    	addOverlays(results);
	    }
	  }
	};

	function addOverlays(results){
		// 自行添加起点和终点
		var start = results.getStart();
		var end = results.getEnd();
		var viewPoints = [start.point, end.point];
        // 获取方案
		var plan = results.getPlan(0);
		for (var i =0; i < plan.getNumRoutes(); i ++) {
			addRoute(plan.getRoute(i).getPath());
			viewPoints.concat(plan.getRoute(i).getPath());
		}
		
		// 设置地图视野
	    map.setViewport(viewPoints, {
	        margins: [40, 10, 10, 10]
	    });
	}

    //在贵州范围内搜索
    var driving = new BMap.DrivingRoute("贵州省",options);  
    driving.search("贵阳","开阳县");
	driving.search("贵阳" , "铁厂乡");
    
    
    
    
    // 添加路线
	function addRoute(path){
	    map.addOverlay(new BMap.Polyline(path, {
	        strokeColor: '#333',
	        enableClicking: false
	    }));
	}
   
  
     
    
    </script>
</html>

附件中是一个更完整的代码，可直接显示结果。