百度地图API:自定义途经点路线拼接

qq_39309642

已于 2023-06-02 15:32:45 修改

阅读量4.2k

点赞数 2

文章标签：百度地图API

于 2020-07-06 15:25:21 首次发布

本文链接：https://blog.csdn.net/qq_39309642/article/details/89447301

版权

百度地图API:自定义途经点路线拼接

百度官方提供途经点有一个限制是：
途经点不超过10个。
但是可以自定义途径点，然而又引发出新的问题：
经测试一条线路的自定义途径点最多也只能到29个（不知道是什么原因，去百度地图贴吧发帖也没有回应，望懂的大神帮忙解释解释，在此谢过），一旦超出会清空所有的点和路线，只能做路线的拼接，最多以每29个途经点为一条路线。
（ps：拼接的弊端：当一条路线的最后一个途经点未在道路上，比如建筑物上面的时候，根据路线的规划下一条线路可能会存在和上一条线路未拼接在一起的情况）

本地显示: 在这里插入图片描述

完整代码`.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=填自己的AK"></script>
<title>设置驾车路线途经点</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(121.443532,31.24603), 13);
map.enableScrollWheelZoom(true);


function showPoly(pointList){

        //循环显示点对象
        for(var c=0;c<pointList.length;c++){
			var marker = new BMap.Marker(pointList[c]);
			map.addOverlay(marker);
			//将途经点按顺序添加到地图上
			var label = new BMap.Label(c+1,{offset:new BMap.Size(20,-10)});
			marker.setLabel(label);
        }
		
		var group = Math.floor(pointList.length / 29);//线路条数
		var mode = '';//多余个数
		var remainder = pointList.length % 29;
		var calculate = remainder + group;
		
		//线条数 多余个数计算
		if (calculate === 29) {
			group += 1;
		} else if (calculate > 29) {
			group += 1;
			mode = calculate - 29;
		} else {
			mode = calculate - 1;
		}

		var driving = new BMap.DrivingRoute( map, {onSearchComplete: function(results){
              if (driving.getStatus() == BMAP_STATUS_SUCCESS){
                     var plan = driving.getResults().getPlan(0);
                     var  num = plan.getNumRoutes();
                     alert("plan.num ："+num);
                     for(var j =0;j<num ;j++){
                      var pts= plan.getRoute(j).getPath();    //通过驾车实例，获得一系列点的数组
                      var polyline = new BMap.Polyline(pts);    
                      map.addOverlay(polyline); 
                     }
					 searchFn();
              }
        }});
		
		//多出的一段单独进行search
		var endFn = function () {
			if (mode !== '') {
				var waypoint = pointList.slice(group * 28 + 1, pointList.length - 1);
				if (mode === 1) {//余数为1 途经点为空
					waypoint = []
				}
				driving.search(pointList[group * 28], pointList[pointList.length - 1], { waypoints: waypoint });
			}
		} 
		
		var groupCopy = parseInt(group.toString());
		//整条线路递归
		var searchFn = function () {
			groupCopy--
			if (groupCopy >= 0) {
				var i = group - groupCopy - 1;
				var waypoint = pointList.slice(i * 28 + 1, (i + 1) * 28);
				driving.search(pointList[i * 28], pointList[(i + 1) * 29 - (i + 1)], { waypoints: waypoint });
			} else if (groupCopy == -1){
				endFn()
			}
		}
		searchFn();

}

//将33个百度坐标点放入数据中
var p1 = new BMap.Point(121.403532,31.24603);
var p2 = new BMap.Point(121.481477,31.240103);
var p3 = new BMap.Point(121.493262,31.237015);
var p4 = new BMap.Point(121.494987,31.230099);
var p5 = new BMap.Point(121.489382,31.225034);
var p6 = new BMap.Point(121.512953,31.219846);
var p7 = new BMap.Point(121.510222,31.228122);
var p8 = new BMap.Point(121.520715,31.232198);
var p9 = new BMap.Point(121.515828,31.239485);
var p10 = new BMap.Point(121.498724,31.238868);
var p11 = new BMap.Point(121.496568,31.227505);
var p12 = new BMap.Point(121.479177,31.244178);
var p13 = new BMap.Point(121.496712,31.249365);
var p14 = new BMap.Point(121.503323,31.260972);
var p15 = new BMap.Point(121.512953,31.276158);
var p16 = new BMap.Point(121.481764,31.26838);
var p17 = new BMap.Point(121.464804,31.285293);
var p18 = new BMap.Point(121.468685,31.251587);
var p19 = new BMap.Point(121.47041,31.245289);
var p20 = new BMap.Point(121.489094,31.19106);
var p21 = new BMap.Point(121.514534,31.207987);
var p22 = new BMap.Point(121.525314,31.178208);
var p23 = new BMap.Point(121.530363,31.160422);
var p24 = new BMap.Point(121.533363,31.159422);
var p25 = new BMap.Point(121.545005,31.203169);
var p26 = new BMap.Point(121.562252,31.186364);
var p27 = new BMap.Point(121.569295,31.170422);
var p28 = new BMap.Point(121.575907,31.15559);
var p29 = new BMap.Point(121.585907,31.14559);
var p30 = new BMap.Point(121.595907,31.13559);
var p31 = new BMap.Point(121.590007,31.12559);
var p32 = new BMap.Point(121.605907,31.11559);
var p33 = new BMap.Point(121.615907,31.10559);

var arrayList = [] ;
arrayList.push(p1);arrayList.push(p2);arrayList.push(p3);arrayList.push(p4);arrayList.push(p5);arrayList.push(p6);
arrayList.push(p7);arrayList.push(p8);arrayList.push(p9);arrayList.push(p10);arrayList.push(p11);arrayList.push(p12);
arrayList.push(p13);arrayList.push(p14);arrayList.push(p15);arrayList.push(p16);arrayList.push(p17);arrayList.push(p18);
arrayList.push(p19);arrayList.push(p20);arrayList.push(p21);arrayList.push(p22);arrayList.push(p23);arrayList.push(p24);arrayList.push(p25);arrayList.push(p26);arrayList.push(p27);arrayList.push(p28);arrayList.push(p29);arrayList.push(p30);arrayList.push(p31);arrayList.push(p32);arrayList.push(p33);


//显示轨迹
showPoly(arrayList);

</script>

请填自己的AK
代码参考至 https://blog.csdn.net/u010367582/article/details/50484428
首先感谢原博主的分享，这次又无意看到并且博主评论区里面又有一些新的疑惑
本来是想在评论区直接发一个showPoly（）的，奈何评论里面有字符限制
本着共同学习的原则，这才发表的，如原博主看到心有芥蒂可以随时联系删除