采用百度地图|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.0&ak=ZY3NXS5MWZXGlHaTQikPK3BuxnxQF0hB"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
二、构建地图
<div id="allmap"></div>
三、组装数据
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
标签：行车,map,js,points,BMap,var,new,PointArr,百度 来源： https://blog.csdn.net/weixin_38948287/article/details/99850375