百度地图画出手机GPS行驶轨迹——Web端

红太狼 2022-07-12 23:11 403阅读 0赞

以下使用的坐标点是公司应用采集来的数据，大家可以[在百度地图坐标拾取工具][Link 1]里面拾取到坐标来替换文章中的坐标。

**方案一：DrivingRoute**

原理是使用百度地图的DrivingRoute驾驶导航来拼接我们的GPS点，形成完整的线路。

优点：采集GPS点的时候不用过于密集。

缺点：当线路过长，GPS点过多会导致响应过慢；当用户不按照导航的线路来行驶，画出来的行驶轨迹跟真正的行驶轨迹不吻合。

实现：先循环GPS点，用第一个点做起点，第二点做终点，以此类推，来循环调用DrivingRoute，这样拼接起来就形成了线路。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=aGf0sLjv7DOonc61fINdATGez2d3O8xB"></script>
    		<style type="text/css">
    			body,html {
    				width: 100%;
    				height: 100%;
    				margin: 0;
    				font-family: "微软雅黑";
    			}
    			#map_canvas {
    				width: 100%;
    				height: 600px;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div id="map_canvas"></div>
    		
    		<script>
    			var map = new BMap.Map('map_canvas');
    			map.enableScrollWheelZoom();
    			
    			/**采集到的GPS点**/
    			var PointArr = [{"x":106.6621950000,"y":26.6271700000},
    							{"x":106.6622350000,"y":26.6271700000},
    							{"x":106.7329920000,"y":26.6110190000},
    							{"x":106.7739370000,"y":26.6371410000},
    							{"x":106.7786660000,"y":26.6372330000}];
    			var p = Math.ceil(PointArr.length / 2);
    			map.centerAndZoom(new BMap.Point(PointArr[p].x, PointArr[p].y), 13);
    			var driving;
    			for(var i in PointArr){
    				if(i == 0 ){
    					addMarker(new BMap.Point(PointArr[i].x, PointArr[i].y),"起点");
    					continue;
    				}
    				driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: false}, 
    		        onMarkersSet:function(routes) {
    		            map.removeOverlay(routes[0].marker); //删除API自带起点
    		            map.removeOverlay(routes[1].marker); //删除API自带终点
    		        }});
    		        driving.search(new BMap.Point(PointArr[i-1].x, PointArr[i-1].y), 
    						new BMap.Point(PointArr[i].x, PointArr[i].y));
    		        if(i == PointArr.length -1){
    					addMarker(new BMap.Point(PointArr[i].x, PointArr[i].y),"终点");
    		        }
    			}
    			/**
    			 * 标记
    			 * @param {Object} point
    			 */
    			function addMarker(point,name){
    				var marker = new BMap.Marker(point);
    				var label = new BMap.Label(name, {
    					offset : new BMap.Size(20, -10)
    				});
    				marker.setLabel(label);
    				map.addOverlay(marker);
    			}
    		</script>
    	</body>
    </html>

运行结果：

![Center][]

**方案二：自定义线路**

原理就是使用百度地图的BMap.Polyline来画出GPS点的线路。每个点都自己画，不使用百度地图提供的DrivingRoute驾驶导航来实现。

优点：如果在GPS完美采集的情况下，画出来的线路非常的精准，基本跟正真的行驶轨迹一致。

缺点：如果在GPS采集不完整的情况下，将会在地图上出现很长的一条直线...

实现：直接使用Polyline来实现，先将我们的GPS点读取出来，转换成百度的BMap.Point对象，然后将转换号的BMap.Point对象全部添加到数组里面去，在将数组传入BMap.Polyline的构造函数，最后调用map.addOverlay就大功告成了。

<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 {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
    		#allmap{height:500px;width:100%;}
    	</style>
    	
    	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=aGf0sLjv7DOonc61fINdATGez2d3O8xB"></script>
    	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    	<title>查询出车辆行驶轨迹</title>
    </head>
    <body>
    	<div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript">
    	// 百度地图API功能
    	var map = new BMap.Map("allmap");
    	map.enableScrollWheelZoom();
    	var runLine =[]; 
    	function initMap(){ 
    		//读取后台数据.这里直接读取json文件
    		var dataroot="json/run.json"; 
    		jQuery.getJSON(dataroot, function(data){ 
    			runLine=data;
    			//设置地图中心点(已GPS数组中间的点为中心点)
    			var centre = runLine[parseInt(runLine.length/2)]
    			map.centerAndZoom(new BMap.Point(centre.lng, centre.lat), 13);
    			var arrPois = [];
    			//将后台读取到的GPS点信息，全部存储为百度的BMap.Point坐标点对象并用数组装起来
    			jQuery.each(runLine,function(i, n) {
    				arrPois.push(new BMap.Point(n.lng,n.lat));
    			});
    			/**添加终点和起点的标记**/
    			addMarker(new BMap.Point(runLine[0].lng,runLine[0].lat),'终点');
    			addMarker(new BMap.Point(runLine[runLine.length-1].lng,runLine[runLine.length-1].lat),'起点');
    			//创建线路
    			var polyline = new BMap.Polyline(
    				arrPois,//所有的GPS坐标点
    				{
    				strokeColor : "#009933", //线路颜色
    				strokeWeight : 4,//线路大小
    				//线路类型(虚线)
    				strokeStyle : "dashed"});
    			//绘制线路
    			map.addOverlay(polyline);
    		});
    	}
    	
    	/**
    	 * 标记
    	 * @param {Object} point
    	 */
    	function addMarker(point,name){
    		var marker = new BMap.Marker(point);
    		var label = new BMap.Label(name, {
    			offset : new BMap.Size(20, -10)
    		});
    		marker.setLabel(label);
    		map.addOverlay(marker);
    	}
    	
    	//初始化地图
    	initMap();
    	
    </script>

运行结果：

![Center 1][]

\---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

PS：显示不是难点，难点在于GPS点的采集上。尤其是Android的新机型，现在的机器都加上了自动清除高耗电的后台应用。一言不合就被系统删了，不说了，都是泪啊，现在我都还在各种爬坑中。

另外奉劝各位猿，千万不要轻易承诺能快速掌握你不懂的开发技术，比如像我，说自己稍微学一学就能开发Android，现在我就傻逼掉了。

[Link 1]: http://api.map.baidu.com/lbsapi/getpoint/index.html
[Center]: /images/20220713/35e6c5e565d94b679bc9fd6467701411.png
[Center 1]: /images/20220713/30239cee5084412880aa269770967c09.png