通过百度地图API单点运动,实现添加多个途经点

本文介绍了一种通过百度地图API实现小人从起点出发,经过多个途经点到达终点的方法。尽管作者尝试通过循环动态获取途经点,但因技术限制未能成功。最终采取了将不同路径坐标点数组合并的策略,实现了多途经点的静态添加。作者期望能通过for循环动态实现这一功能。
摘要由CSDN通过智能技术生成

在这里插入图片描述
1 通过驾车实例,小人从起点经过多个途经点行驶到终点
2 :bo坐标标点数组,一变量,动态获取bo。本想通过循环bo长度来实现,但由于本人技术有限,对百度地图API了解不深,没有实现,只能用个笨法子。
3 下面这段代码是通过百度地图导航功能实现,将坐标点连起来得到行车路线轨迹

		var driving2 = new BMap.DrivingRoute(map); //驾车实例
			 driving2.search(bo[0],bo[1]);
			driving2.setSearchCompleteCallback(function(){
			      var pts= driving2.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例,获得一系列点的数组 	 
			        var polyline = new BMap.Polyline(pts);     
			          map.addOverlay(polyline); 
				})	

4 由于百度地图单点运动只支持两个点,是先找到两点间路线在把路线划分成坐标点数组,通过点到点的实现完成小人的移动。 想了很多法子也没有见途经点添加到两点中间
5 最后的实现,举个例子,要得到从a到b,在从b到c的结果,分别得到,从a到b的坐标点数组是s1,从b到c的坐标点数组s2,最后通过concat数组方法,将s2数组添加到s1数组成一个新的数组s3,让小人根据s3数组起点进行移动。实现添加途经点的方法。
6 目前的方法实现是写死的,最好能够通过for循环实现添加途经点,但研究了好久,总是无法实现,如果有能实现的,还望告知下,谢谢!
7 以下代码是动态实现7个节点,都是写死的。

var dri = new BMap.DrivingRoute(map);
		if(bo.length==2){
			var driving2 = new BMap.DrivingRoute(map); //驾车实例
			 driving2.search(bo[0],bo[1]);
			driving2.setSearchCompleteCallback(function(){
			      var pts= driving2.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例,获得一系列点的数组 	 
			        var polyline = new BMap.Polyline(pts);     
			          map.addOverlay(polyline); 
				})	
				dri.search(bo[0],bo[1]);
			dri.setSearchCompleteCallback(function(){
				var pts = dri.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例,获得一系列点的数组
				var paths = pts.length;    //获得有几个点
				var carMk = new BMap.Marker(pts[0],{icon:myIcon});
				map.addOverlay(carMk);
				i=0;
				function resetMkPoint(i){
					carMk.setPosition(pts[i]);
	
可以通过以下步骤实现百度地图API多个渲染路径: 1. 获取多个的经纬度坐标,可以通过百度地图API的搜索服务、定位服务或者手动输入获取。 2. 根据获取的经纬度坐标,在地图上标记多个,可以使用百度地图API的覆盖物(marker)功能实现。 3. 使用百度地图API的路线规划服务,根据多个的经纬度坐标计算出路径,生成路线规划结果。 4. 将路线规划结果显示在地图上,可以使用百度地图API的折线(polyline)功能实现。 以下是示例代码: ```javascript // 多个的经纬度坐标 var points = [ new BMap.Point(116.404, 39.915), new BMap.Point(116.407, 39.920), new BMap.Point(116.410, 39.912) ]; // 在地图上标记多个 for (var i = 0; i < points.length; i++) { var marker = new BMap.Marker(points[i]); map.addOverlay(marker); } // 创建路线规划服务实例 var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } }); // 根据多个的经纬度坐标计算路径 driving.search(points[0], points[points.length - 1], { waypoints: points.slice(1, -1) }); // 显示路线规划结果 driving.setSearchCompleteCallback(function () { var path = driving.getResults().getPlan(0).getRoute(0).getPath(); var polyline = new BMap.Polyline(path, { strokeColor: "#FF0000", strokeWeight: 3, strokeOpacity: 0.5 }); map.addOverlay(polyline); }); ``` 其中,`points`数组中的每个元素都是一个`BMap.Point`对象,表示一个的经纬度坐标。`driving`是一个`BMap.DrivingRoute`对象,用于计算路线规划结果。`driving.search`方法用于计算路径,其中第一个参数为起坐标,第二个参数为终坐标,第三个参数`waypoints`为途经坐标数组。`driving.setSearchCompleteCallback`方法用于设置计算完成后的回调函数,该回调函数中可以获取到路线规划结果`path`,并用`BMap.Polyline`对象将其显示在地图上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值