利用baidu js api 做自驾路线

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

bruce_wang_janet

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

阅读量1k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/bruce_wang_janet/article/details/8134157

版权

web 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1. 参考demo，代码如下，接口注释

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>驾车途经点</title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

	</head>
	<body>
		<br />
		<p><input type='button' value='开始' οnclick='run();' /></p>

		<br />
		<input id="text1">
		<br />
		<input id="text2">
		<br />
		<div style="width:1500px;height:1000px;border:1px solid gray" id="container"></div>
		<script type="text/javascript">
		var map = new BMap.Map("container");
		map.centerAndZoom(new BMap.Point(115.501471,37.11128), 15); //15是地图级别，如洲，国，省，地区等，1--19
		map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。
		map.enableKeyboard();                         // 启用键盘操作。
		map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
		map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
		map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控
	</script>
	<script type="text/javascript">
		
		function drawPoints(pointarray,count){
			for (var i=0; i<count; i++)
			{
				var j = i
				var lab = new BMap.Label("点"+j,{position:pointarray[j]});
				lab.setStyle({
					height:"12px",
					width:"12px",
					fontSize:"8px"});
					
				map.addOverlay(lab);
			}				
		}


function run(){
	map.clearOverlays();                        //清除地图上所有的覆盖物
	var driving = new BMap.DrivingRoute(map);    //创建驾车实例

	var myP1 = new BMap.Point(115.501471,37.11128);    //威县侯贯
	var myP2 = new BMap.Point(114.551623,36.994921);    //沙河北俎
 

	
	driving.search(myP1, myP2);                 //第一个驾车搜索

	driving.setSearchCompleteCallback(function(){
			var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    
			document.getElementById("text1").value= pts.length;
			document.getElementById("text2").value = pts[0].lng + " : " + pts[0].lat; // lat
			console.dir(pts);  //firefox的浏览器通过console打印对象，很是好用！
			drawPoints(pts,100);
			
			var polyline = new BMap.Polyline(pts);     
			map.addOverlay(polyline);

			var m1 = new BMap.Marker(myP1);         //创建3个marker
			var m2 = new BMap.Marker(myP2);
		//	var m3 = new BMap.Marker(myP3);;

			map.addOverlay(m1);
			map.addOverlay(m2);
			//map.addOverlay(m3);
			map.setViewport([myP1,myP2]);   //调整到最佳视野

	});
}
</script>

<script type="text/javascript">

	{
		document.write("<h1>这是标题</h1>");
		document.write("<p>这是段落。</p>");

		document.write("<p>这是另一个段落。</p>");
	}
</script>

</body>
</html>

2. 效果图