百度地图绘制多段 驾车路线

最新推荐文章于 2023-06-01 16:52:16 发布
最新推荐文章于 2023-06-01 16:52:16 发布
阅读量539 收藏
点赞数
分类专栏： 前端 html 文章标签： 百度 js map html5 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iT_MaNongking/article/details/117548677
版权
百度地图绘制多段 驾车路线

直接上代码：

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>百度地图绘制驾车途经点路线图</title>  
 <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=3c3eb86a72b9af267d7432a4159768dd"></script>
						<script
						  src="https://code.jquery.com/jquery-1.12.4.js"
						  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
						  crossorigin="anonymous"></script>
</head>  
<body> 
 <div id="">
 	<p>坐标点：<input type='text' id="pointStr" placeholder="坐标点(开始/途经点/终点) 坐标点之间用竖杠分割(如:109.27729623,35.0843510|109.276876,35.0804703)" style="width: 81.25rem;height: 2.5rem;" /></p>
	
 </div>
<p><input type='button' value='开始画线' onclick='run();' /></p>  
<div style="width:1400px;height:600px;border:1px solid gray" id="container"></div>  
<script type="text/javascript">  
    var map = new BMap.Map("container");  
    map.centerAndZoom(new BMap.Point(113.288386,23.139859),20); 
		   map.enableScrollWheelZoom(true); // 滚轮缩放
			  map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
			         map.addControl(new BMap.NavigationControl(
			             {
			                 type : BMAP_NAVIGATION_CONTROL_ZOOM, //缩放控件类型 仅包含缩放按钮
			                 anchor : BMAP_ANCHOR_TOP_LEFT, //左上角
			                 offset : new BMap.Size(1,1) //进一步控制缩放按钮的水平竖直偏移量
			             }
			         ));
    map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件  
    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件  
    map.addControl(new BMap.OverviewMapControl()); 
								 
	//添加缩略地图控件 
    // var myP1 = new BMap.Point(109.27729623387252,35.08435108922867); 
    // var myP2 = new BMap.Point(109.27687667087184,35.08047031893331);    
    // var myP3 = new BMap.Point(109.16293867684635,34.8374516358238);
    // var myP4 = new BMap.Point(	109.08492109954132,34.824928484264824);
    // var myP5 = new BMap.Point(113.301513,23.129129);
      
    window.run = function (){ 
			var mapPoint=[];
			var pointStr=$("#pointStr").val();
			if(pointStr!=""&&pointStr!="undefind"){
				var point=pointStr.split("|")
				point.forEach((point)=>{
				var	co=point.split(",")
					var myP1 = new BMap.Point(parseFloat(co[0]),parseFloat(co[1]));
					mapPoint.push(myP1);
				})
			}
			 map.clearOverlays(); 
			
			var newArray=group(mapPoint)
			// alert(JSON.stringify(newArray))
			
			newArray.forEach((newPoint,index)=>{
				var driving = new BMap.DrivingRoute(map);    //创建驾车实例
				   // driving.search(myP1, myP4);                 //第一个驾车搜索  
						driving.search(newPoint[0], newPoint[newPoint.length-1]);  
				   
				   driving.setSearchCompleteCallback(function(){  
				       var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组  
				 
				       var polyline = new BMap.Polyline(pts);       
				       map.addOverlay(polyline);  
										
									 newPoint.forEach((point,index)=>{
											 var m = new BMap.Marker(point); 
												map.addOverlay(m); 
												var lab= new BMap.Label("目标点",{position:point});
											  map.addOverlay(lab); 
										 })
				         
				//        var m1 = new BMap.Marker(myP1);         //创建3个marker  
				//        var m2 = new BMap.Marker(myP2);  
				//        var m3 = new BMap.Marker(myP3);  
				//        var m4 = new BMap.Marker(myP4);  
				//        // var m5 = new BMap.Marker(myP5);  
				
				//        map.addOverlay(m1);  
				//        map.addOverlay(m2);  
				//        map.addOverlay(m3);
				//        map.addOverlay(m4);
				//        // map.addOverlay(m5);
				
				//        var lab1 = new BMap.Label("起点",{position:myP1});        //创建3个label  
				//        var lab2 = new BMap.Label("途径点1",{position:myP2});  
				//        var lab3 = new BMap.Label("途径点2",{position:myP3}); 
				//        var lab4 = new BMap.Label("终点",{position:myP4}); 
				//        // var lab5 = new BMap.Label("终点",{position:myP5});            
				
				//        map.addOverlay(lab1);  
				//        map.addOverlay(lab2);  
				//        map.addOverlay(lab3);
				//        map.addOverlay(lab4);  
				//        // map.addOverlay(lab5);  
				    
				         
				       setTimeout(function(){  
											 map.setViewport(newPoint);          //调整到最佳视野  
				           // map.setViewport([myP1,myP2,myP3,myP4]);          //调整到最佳视野  
				       },1000);  
				         
				   });  
			})
			
                              //清除地图上所有的覆盖物  
        
    }  
		
		
		function group(array) {
		      let index = 0;
		      let newArray = [];
		      while(index < array.length) {
								newArray.push(array.slice(index, index+2));
								index++	 
		      }
		      return newArray;
		  }
</script>  
</body>  
</html>
iT_MaNongZYQ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度地图实现小车规划路线后平滑移动功能
08-25
DrivingRouteResult类是百度地图API提供的一个结果类，用于存储驾车路线规划的结果。通过使用DrivingRouteResult类，我们可以快速处理驾车路线规划的结果。 知识点5：小车规划路线后平滑移动的实现 在本文中，我们...
百度地图API 驾车路线的自定义绘制
04-15
NULL 博文链接：https://musicbox95351.iteye.com/blog/1767010
Vue使用百度地图，添加线路、站点，简易封装，方便修改(vue使用百度地图实现添加多条线路、多个站点)
weixin_65793170的博客
11-28 4457
//定义地图数据BMap: "",map: "",center: { lng: 118.904, lat: 31.915 },//中心坐标zoom: 11, //初始缩放比scrollZoom: true,//允许鼠标滚轮缩放//折线颜色和标注icon],//线路坐标信息//站点坐标信息。
vue利用百度地图api画路线&打点&滑入展示（坐标）
weixin_44197797的博客
06-30 6262
1.创建地图容器 <div id="allmap" style=" border-radius: 5px;" ></div> 2.展示百度地图 guiji() { var map = new BMap.Map('allmap') var point = new BMap.Point(132.1321213213,382651646846) //随便写的坐标 } 3.画出路线（注意看注释） guiji() { var map = new BMa
【百度地图】制作多途经点的线路导航,模拟运动 (vue,typescript)
finefish的专栏
12-13 2744
  网上有从起点到终点的模拟线路和运动，途经点的比较少。 结合网上demo，再进行了一下修改。 VUE （Typescript），先在index.html里引用 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equi
使用百度地图api绘制车辆多点行驶路径
小明的专栏
07-19 3549
示例代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content="initial-scale=1.0
百度地图 多点规划路径（多个坐标点连接）
weixin_30906701的博客
07-17 2353
这一版比较简陋，并且没有做数字限制，也只能传偶数个坐标点，后期继续更新 百度地图坐标点拾取地址 http://api.map.baidu.com/lbsapi/getpoint/index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/...
Android百度地图自定义公交路线导航
09-02
`RouteOverlay`是百度地图API提供的用于绘制路径线的类，它可以显示公交、步行或驾车路线。`CustomRouteOverLay`可以扩展其功能，根据需要添加特定的绘制逻辑。 ```java public class CustomRouteOverLay extends ...
百度地图 功能模块完整版 开发指南
04-07
（5）启动百度地图驾车线路规划； （6）启动百度地图公交路线规划； （7）启动百度地图骑行导航；(需百度地图App 8.8以上版本支持) （8）启动百度地图步行导航；(需百度地图App 8.8以上版本支持) -----------------...
百度地图Android Sdk最新版
08-24
线路规划：提供公交、驾车和步行三种类型，多种方案（不含地铁、时间优先、最少换乘、最少步行、驾车避让拥堵）的线路规划。 地理编码：提供地址信息与坐标之间的相互转换。 位置标注：提供一个或多个POI位置标注...
vue-baidu-map实现路径规划查询
衫青
10-16 1803
Vue Baidu Map 官方文档 安装步骤文档里面有。 已封装好组件，直接可用。 <template> <div class="user-main"> <div class="address"> <i class="el-icon-location"></i> <span class="schname">甘肃农业职业技术学院</span>
vue-baidu-map：实现地点搜索和路径规划
KiMiWaWonderful的博客
02-14 3289
一、自定义一个百度地图控件： 该控件包括一个输入框，用于输入要搜索的地址；一个路线按钮，点击后弹出面板，用于选择出行方式和输入始终点；一个搜索按钮。 <bm-control> <div id="searchbox" class="clearfix"> <div id="searchbox-container"> ...
百度地图根据多个经纬度，绘制路线
热门推荐
潇潇寒的博客
09-09 2万+
直接上代码： body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} #allmap {position:absolute;left:0px;width: 100%;height: 100%;overflow: hid
百度地图显示多个坐标并连线显示用户轨迹
springmvc_freemarker的博客
12-29 4380
百度地图显示多个坐标并连线显示用户轨迹 源代码下载地址：http://www.zuidaima.com/share/1725860176432128.htm
百度地图基本使用及画线路轨迹播放问题
想你依然心痛的博客
04-24 1万+
最近项目中用到了百度地图，以前用过的有点老了，最近百度地图改版了，所以这里记录一下遇到的问题。 百度地图一些基本的配置我就不说了，直接看百度地图开发者中心：http://lbsyun.baidu.com/ 就可以了。 当然有些也是从网上的博客里面看到的，这里没记住网址，一并感谢了。1、配置百度地图进行经纬度的定位和画折线图轨迹以及百度地图控件和ScrollView滑动冲突的问题解决。 2、在地
vue 实现可以转弯的步骤条
最新发布
weixin_46328739的博客
06-01 2612
会拐弯的步骤条效果如下。
vue 集成封装 高德地图webJs 绘制线路规划&自定义多条轨迹回放
Zihuatanjo
03-30 2542
撒大声地
vue2+百度离线地图实现多车辆行驶动态轨迹
weixin_39277183的博客
12-02 3849
有个缺点就是如果数据量庞大会导致浏览器性能消耗严重，因为这里使用了定时器实现，应该有更好的办法实现，完成改功能效果需要连个接口，①初始化坐标点接口，②增量坐标点接口。实现多车辆实时轨迹监控，每个10秒监测一次接口，进行动态追加。vue2+百度离线地图实现行驶车辆动态轨迹。
基于vue+百度地图的多车实时运动及轨迹追踪实现（心路历程篇）
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
04-06 5263
开局两张图，剩下全靠吹origin.gif202203231421回放.gif基于vue+百度地图的多车实时运动及轨迹追踪实现，共分为上下两篇，分别为上篇“心路历程篇”和下篇“上帝视角篇”，上篇是背景介绍和我实现过程中走的弯路，下篇是最终版的实现方案。其实并不存在上帝视角，只希望有一天，我们可以通过不断复盘，少走点弯路。本篇是上篇，心路历程篇。项目背景此处省略一万字，交给...
百度地图api绘制多段路径
05-12
要在百度地图上绘制多段路径，可以使用百度地图API提供的API函数，并按照以下步骤进行操作： 1. 在HTML文件中引用百度地图API的JS文件和CSS文件。 2. 创建地图实例并设置中心点和缩放级别。 ``` var map = new BMap.Map("container"); //创建地图实例 var point = new BMap.Point(116.404, 39.915); //设置中心点坐标 map.centerAndZoom(point, 15); //设置地图缩放级别 ``` 3. 创建多个起点和终点坐标点，并将它们存储在一个数组中。 ``` var points = [ new BMap.Point(116.403981,39.915101), new BMap.Point(116.398839,39.914101), new BMap.Point(116.39342,39.917171) ]; ``` 4. 遍历坐标点数组，使用`BMap.DrivingRoute`或`BMap.WalkingRoute`对象绘制路径。 ``` var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); for(var i=0; i<points.length-1; i++){ driving.search(points[i], points[i+1]); } ``` 5. 最后，启用地图拖拽和缩放功能，并将地图显示在HTML页面中。 ``` map.enableScrollWheelZoom(true); //启用地图滚轮放大缩小 map.enableDragging(); //启用地图拖拽 map.addControl(new BMap.NavigationControl()); //添加平移缩放控件 map.addControl(new BMap.ScaleControl()); //添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 ``` 完整代码示例： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度地图API绘制多段路径</title> <style type="text/css"> #container {height: 600px; border: 1px solid gray;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container"); //创建地图实例 var point = new BMap.Point(116.404, 39.915); //设置中心点坐标 map.centerAndZoom(point, 15); //设置地图缩放级别 var points = [ new BMap.Point(116.403981,39.915101), new BMap.Point(116.398839,39.914101), new BMap.Point(116.39342,39.917171) ]; var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); for(var i=0; i<points.length-1; i++){ driving.search(points[i], points[i+1]); } map.enableScrollWheelZoom(true); //启用地图滚轮放大缩小 map.enableDragging(); //启用地图拖拽 map.addControl(new BMap.NavigationControl()); //添加平移缩放控件 map.addControl(new BMap.ScaleControl()); //添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 </script> </body> </html> ``` 其中，`BMap.DrivingRoute`对象可以用于驾车路线规划，`BMap.WalkingRoute`对象可以用于步行路线规划。使用方法类似，只需要将对象名称修改即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值