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

最新推荐文章于 2023-10-25 15:00:57 发布

iteye_4512

最新推荐文章于 2023-10-25 15:00:57 发布

阅读量1.1k

点赞数

分类专栏：百度地图 API 文章标签：前端 javascript ViewUI

本文链接：https://blog.csdn.net/iteye_4512/article/details/82471462

版权

百度地图 API 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

<!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>

[/quote]

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


<!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>

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

iteye_4512

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度地图API 驾车路线的自定义绘制

下面的代码解决了自定义绘制驾车路线、调整视野以便显示起点和终点、自定义起点终点的标记。[url]http://www.cnblogs.com/jz1108/archive/2011/09/23/2185444.html[/url][quote]驾车导航var map =new BMap.Map('container');map.c...
复制链接

扫一扫

专栏目录