采用百度地图|js实现行车轨迹、覆盖类等。

最新推荐文章于 2023-06-11 18:09:48 发布

蓝影灵

最新推荐文章于 2023-06-11 18:09:48 发布

阅读量2k

点赞数 2

本文链接：https://blog.csdn.net/weixin_38948287/article/details/99850375

版权

效果图：

一、引进js

二、构建地图

三、组装数据

var PointArr =JSON.parse('${track!}');

数组对象[{BLng，BLat},{BLng，BLat},{BLng，BLat}]

var points = [];//行驶轨迹点数组
var pointStart = new BMap.Point(PointArr[0].BLng, PointArr[0].BLat); //起点
var pointEnd=new BMap.Point(PointArr[PointArr.length-1].BLng, PointArr[PointArr.length-1].BLat); //终点
for(var i=0;i<PointArr.length;i++){
var pointTemp = new BMap.Point(PointArr[i].BLng, PointArr[i].BLat);
points.push(pointTemp);
}

四、画线

具体看代码

<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8">
    <title>行车轨迹</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,  user-scalable=no">
	<script type="text/javascript" src="${cxt!}/static/wxweb/oil/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZY3NXS5MWZXGlHaTQikPK3BuxnxQF0hB"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <link rel="stylesheet" href="${cxt!}/static/wxweb/car/css/trajectory.css">
  </head>

  <body>
<div class="tit">
	<img src="${cxt!}/static/wxweb/car/images/backcarIcon.png" onclick="javascript:history.go(-1);"/>
	<h2>行车轨迹</h2>
</div>

<!--<header>
 <div class="partt">
	   <div class="partl">
		    <div><img src="${cxt!}/static/wxweb/car/images/redr.png"/><span><20</span></div>
		    <div><img src="${cxt!}/static/wxweb/car/images/bluer.png"/><span>20-60</span></div>
		    <div><img src="${cxt!}/static/wxweb/car/images/green.png"/><span>>60</span></div>
	   </div>
	   <div class="partr">
	   	    <span class="score_num">100</span>
	        <img src="${cxt!}/static/wxweb/car/images/score.png"/>   
	   </div>
	</div>
	<div class="partb">
		 <div>
			<img src="${cxt!}/static/wxweb/car/images/flag1.png" class="flagw"/>
			<img src="${cxt!}/static/wxweb/car/images/bub_r.png" class="blb"/>
			<span>急加速0</span>
		 </div>
		 <div>
			 <img src="${cxt!}/static/wxweb/car/images/flag2.png" class="flagw"/>
			 <img src="${cxt!}/static/wxweb/car/images/bub_g.png" class="blb"/>
			 <span>急减速0</span>
		 </div>
		 <div>
			 <img src="${cxt!}/static/wxweb/car/images/flag3.png" class="flagw"/>
			 <img src="${cxt!}/static/wxweb/car/images/bub_b.png" class="blb"/>
			 <span>急转弯0</span>
		 </div>
	</div>
</header> -->

<div id="allmap"></div>

<!-- <footer>
		<div class="fleft">
			<div>
			  <span class="cric ccolor_r"></span><span>${totoalTime!}H<p>行驶时间</p></span>
			</div>
			<div>
			  <span class="cric ccolor_g"></span><span>${travelMileage!}KM<p>行驶里程</p></span>
			</div>
			<div>
			  <span class="cric ccolor_b"></span><span>${avgSpeed!}KM/H<p>平均速度</p></span>
			</div>
		<div>
		 <span class="cric ccolor_p"></span><span>5.0L/100KM<p>平均油耗</p></span>
		</div> 
	</div>	
	<div class="fright">
		<a href="#" onclick="round();">
		<img src="${cxt!}/static/wxweb/car/images/change1.png"/>
	    </a>
		
		<a  href="#" onclick="shrink();">
		<img src="${cxt!}/static/wxweb/car/images/change2.png"/>
		</a>
		
		<a href="#" onclick="focusMap()">
		<img src="${cxt!}/static/wxweb/car/images/change3.png"/>
		</a>
		
	    <div class="playd">
		<input id="play" type="button" onclick="play();" disabled  class="playcss"/>  
		</div>
	</div>
</footer> -->
<script src="${cxt!}/static/wxweb/wechat/layui/layui.all.js"></script>
<script src="${cxt!}/static/wxweb/wechat/layui/lay/modules/layer.js"></script>
<script>
var cxt = "${cxt!}";
var clng,clat;
var starttime="${starttime!}",endtime="${endtime!}";
var imei= "${imei!}";
var PointArr =JSON.parse('${track!}');
var points = [];
var pointStart = new BMap.Point(PointArr[0].BLng, PointArr[0].BLat); 
var pointEnd=new BMap.Point(PointArr[PointArr.length-1].BLng, PointArr[PointArr.length-1].BLat);  
for(var i=0;i<PointArr.length;i++){
var pointTemp = new BMap.Point(PointArr[i].BLng, PointArr[i].BLat);
points.push(pointTemp);
}  
var map = new BMap.Map("allmap",{minZoom:8,maxZoom:17});     //百度地图对象  
var car;   //汽车图标  
var centerPoint;  
var timer;     //定时器  
var index = 0; //记录播放到第几个point   
var pointA=null;
var playBtn;
var ic=cxt+'/static/wxweb/car/images/carIcon.png';
var myIcon2 = new BMap.Icon(
　　　　　　　　ic, // 百度图片
　　　　　　　　new BMap.Size(40,40), // 视窗大小
　　　　　　　　{
　　　　　　　　　　imageSize: new BMap.Size(35,35), // 引用图片实际大小　
           }
　 );

//
 function ZoomControl1(){
   // 默认停靠位置和偏移量
   this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
   this.defaultOffset = new BMap.Size(5, 50); // 距离左上角位置
 }
 function ZoomControl2(){
  // 默认停靠位置和偏移量
  this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
  this.defaultOffset = new BMap.Size(20, 70); // 距离右上角位置
}
///
ZoomControl1.prototype = new BMap.Control(); 
ZoomControl2.prototype = new BMap.Control();
//
ZoomControl1.prototype.initialize = function(map){
     // 创建一个DOM元素
     var div = document.createElement("div");
     // 添加文字说明
     var div1 = '<div class="fleft">'+
					'<div>'+
					'<span class="cric ccolor_r"></span><span>${totoalTime!}H<p>行驶时间</p></span>'+
					'</div>'+	
					'<div>'+
					'<span class="cric ccolor_g"></span><span>${travelMileage!}KM<p>行驶里程</p></span>'+
					'</div>'+
					'<div>'+
					'<span class="cric ccolor_b"></span><span>${avgSpeed!}KM/H<p>平均速度</p></span>'+
					'</div>'+
				'</div>';
	div.innerHTML = div1;
     // 添加DOM元素到地图中
     map.getContainer().appendChild(div);
     // 将DOM元素返回
     return div;
} 
    ///
 ZoomControl2.prototype.initialize = function(map){
      // 创建一个DOM元素
      var div = document.createElement("div");
      // 添加文字说明
      var div1 = '<div class="fright">'+
					'<a href="#" onclick="round();">'+
					'<img src="${cxt!}/static/wxweb/car/images/change1.png"/>'+
					'</a>'+
					'<a  href="#" onclick="shrink();">'+
					'<img src="${cxt!}/static/wxweb/car/images/change2.png"/>'+
					'</a>'+
					'<a href="#" onclick="focusMap()">'+
					'<img src="${cxt!}/static/wxweb/car/images/change3.png"/>'+
					'</a>'+
					'<div class="playd">'+
					'<input id="play" type="button" onclick="play();" disabled  class="playcss"/>'+
					'</div>'+
				'</div>';
		div.innerHTML = div1;
      // 添加DOM元素到地图中
      map.getContainer().appendChild(div);
      // 将DOM元素返回
      return div;
    }
 
    // 创建控件
    var myZoomCtrl1 = new ZoomControl1();	
    var myZoomCtrl2 = new ZoomControl2();
/  
    // 添加到地图当中
    map.addControl(myZoomCtrl1);
    map.addControl(myZoomCtrl2);

init();
function init() {
	playBtn = document.getElementById("play");     
  	map.centerAndZoom(pointStart,16); 
  	map.setCenter(pointStart);
  	map.enableScrollWheelZoom();  
    map.addControl(new BMap.ScaleControl()); 
    //通过DrivingRoute获取一条路线的point  
    var driving = new BMap.DrivingRoute(map);  
    driving.search(pointStart, pointEnd);  
    driving.setSearchCompleteCallback(function() {   
        //连接所有点  
        map.addOverlay(new BMap.Polyline(points, {strokeColor: "#D1C9C6", strokeWeight: 5, strokeOpacity: 1}));  
        //显示小车子  
        car = new BMap.Marker(points[0],{icon:myIcon2});  
        map.addOverlay(car);       
        //标注起点、终点
        var sic=cxt+'/static/wxweb/car/images/startpoint.png';
		var smyIcon = new BMap.Icon(sic,new BMap.Size(25,25),{imageSize: new BMap.Size(25,25),});
		var eic=cxt+'/static/wxweb/car/images/endpoint.png';
		var emyIcon = new BMap.Icon(eic,new BMap.Size(25,25),{imageSize: new BMap.Size(25,25),});
        var sMark=new BMap.Marker(pointStart,{icon:smyIcon}); 
		map.addOverlay(sMark);   
        var eMark=new BMap.Marker(pointEnd,{icon:emyIcon}); 
		map.addOverlay(eMark);   
		//点亮操作按钮  
        playBtn.disabled = false;
    });  
}  
///  
function play() {
    playBtn.disabled = true; 
    var point = points[index];  
    pointA=point;
    if(index > 0) {  
        map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "green", strokeWeight: 5, strokeOpacity: 1}));  
    }  
    car.setPosition(point);
    car.setRotation(PointArr[index].Direction); 
    index++;  
    if(index < points.length) { 
    	focusMap();  
        timer = window.setTimeout("play(" + index + ")", 200);  
    } else { 
        playBtn.disabled = true;   
        map.panTo(point);
        reset();
    }
}  


function shrink(){//缩小
	map.zoomTo(map.getZoom() - 1);
}
///
function round(){//放大
	 map.zoomTo(map.getZoom() + 1);
}
///
function focusMap(){
   map.setCenter(pointA);//使小车保持在中心点位置移动	
} 

function reset() {  //重置
    playBtn.disabled = false;  
    if(timer) {  
        window.clearTimeout(timer);  
    }  
    index = 0; 
    pointA =points[0];
    car.setPosition(points[0]);  
   	map.setCenter(pointStart);  
} 
</script>	 
</body>
</html>

五、采用百度地图提供的控件在地图上构建功能按钮

ZoomControl

蓝影灵

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
采用百度地图|js实现行车轨迹、覆盖类等。

效果图：一、引进js <script type="text/javascript" src="${cxt!}/static/wxweb/oil/js/jquery.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2...
复制链接

扫一扫