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

最新推荐文章于 2024-06-24 16:40:08 发布

BUG胡汉三

最新推荐文章于 2024-06-24 16:40:08 发布

阅读量2.4w

点赞数 7

分类专栏：百度地图 GPS

本文链接：https://blog.csdn.net/hzw2312/article/details/53671228

版权

百度地图同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

GPS

2 篇文章 0 订阅

订阅专栏

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

方案一：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>

运行结果：

方案二：自定义线路

原理就是使用百度地图的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>
	<!--
    	作者：hzw2312@sina.com
    	描述：ak：这里的ak是需要在百度应用里面申请的
    -->
	<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>

运行结果：

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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

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

BUG胡汉三

关注

7
点赞
踩
61

收藏

觉得还不错? 一键收藏
打赏
13
评论
百度地图画出手机GPS行驶轨迹——Web端

以下使用的坐标点是公司应用采集来的数据，大家可以在百度地图坐标拾取工具里面拾取到坐标来替换文章中的坐标。方案一：DrivingRoute原理是使用百度地图的DrivingRoute驾驶导航来拼接我们的GPS点，形成完整的线路。优点：采集GPS点的时候不用过于密集。缺点：当线路过长，GPS点过多会导致响应过慢；当用户不按照导航的线路来行驶，画出来的行驶轨迹跟真正的行驶轨迹不吻
复制链接

扫一扫