百度地图api描绘车辆历史轨迹图

2023-01-04 17:01:22

最近公司在做项目需需求：车辆定位后在地图显示历史轨迹的功能

一开始使用了google的地图api，但是发现会一直关闭，索性支持下国产，使用了百度地图api

search方法把两个点连接成线后，会出现起点和终点的图标，但是需要要求只有第一个点和最后一个点是起点和终点，中间的全是小车的图案

我画点的功能是为了覆盖掉 search连线的起始点，但是覆盖后悬浮弹出层会出现问题，所以我就写把存放起点和终点的层去掉，

但是地图渲染时需要时间的，我采取了2秒后执行，把存放起点和终点icon的div清空了，这样我就可以了，

当然，谁要是知道怎么去掉或者替换起点和终点的icon，可以告诉我，这样就可以不用画点了，

就会很简单了，

一下是我项目中的代码，进攻参考，

一下位简要代码：

//初始化地图
function initMap(){
map = new BMap.Map("allmap");// 创建Map实例
//根据登录人单位定位地图中心
var belongOrgName = $().getUser()["belongOrgName"];
//point = new BMap.Point(114.928715, 27.418907); // 创建点坐标
map.centerAndZoom(belongOrgName,8);// 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom();//启用滚轮放大缩小
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件

}

下面-----线内代码是画图和点的代码，

data 是我通过ajax获得的后台封装的json数据，具体的每个只代表：

/*0 = id
1 = 单位id
2 = 设备编码
3 = 纬度
4 = 经度
5 = 纬度半球
6 = 经度半球
7 = 地面速度
8 = 地面航向
9 = 磁偏角
10 = 磁偏角方向
11 = 湿度
12 = 温度
13 = 采集时间
14 = 数据状态
15 = 定位时间str
16 = 车名
17 = 车型
18 = 车牌号
19 = 单位名称

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

$.ajax({
url:url,
type:"POST",
async:false,
dataType:"json",
data:{deviceId:deviceId,orientationTimeStart:orientationTimeStart,orientationTimeEnd:orientationTimeEnd},
success:function(data){
if(data!=null){
//遍历车辆轨迹集合，一个个画点画线
for ( var i = 0; i < data.length; i++) {
var s = data[i].split(",");
var snext;
if(i==data.length-1){
snext = null;
}else{
snext = data[i+1].split(",");
}

//画点
var sContent =
"<div class='city_BG' style='background-image: url("+$().getParam('stylePath')+name[3]+");font-size:12px;'>" +
"<table style='magin-top:10px;magin-left:10px;height: 100%;width: 100%;'>" +
"<tr>" +
"<td style='width:60px;' align='right'>车型："+s[17]+"</td>" +
"<td style='width:80px;text-align: center;' align='right'>温度："+s[11]+"℃"+"</td>" +
"</tr>" +
"<tr>" +
"<td style='width:60px;' align='right'>车牌号："+s[18]+"</td>" +
"<td style='width:80px;text-align: center;' align='right'>湿度："+s[12]+"%"+"</td>" +
"</tr>" +
"<tr>" +
"<td style='width:60px;' align='right' colspan='2'>采集时间："+s[13].substring(0,19)+"</td>" +
"</tr>" +
"<tr>" +
"<td style='width:60px;' align='right' colspan='2'>定位时间："+s[15]+"</td>" +
"</tr>" +
"</table>" +
"</div>";
var colorStr = "";
if("1"==s[14]){
colorStr = "green";
}
if("2"==s[14]){
colorStr = "red";
}
if("3"==s[14]){
colorStr = "yellow";
}
var marker = new ComplexCustomOverlayCar(new BMap.Point(s[3], s[4]), "",sContent,colorStr,s[19],s[20],s[21]);
map.addOverlay(marker);

//画线
if(snext != null){
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
driving.search(new BMap.Point(s[3], s[4]), new BMap.Point(snext[3], snext[4]));
}
}
//重新设置开始点位地图中心，不确定是否好使
//map.centerAndZoom(new BMap.Point(data[0].split(",")[3], data[0].split(",")[4]),12);
}
}
});

此处我使用的是同步的ajax,是因为，

//2秒后清除起始点图标，切勿模仿（因为我还没发现换图标的方法）
setTimeout(function(){
$("span.BMap_noprint").parent().remove();
},"2000");

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

//添加车辆位置信息
function ComplexCustomOverlayCar(point,text,sContent,color,title,isStart,isEnd){
this._point = point;
this._text = text;
this._sContent=sContent;
this._color=color;
this._title=title;
this._isStart=isStart;
this._isEnd=isEnd;
}
ComplexCustomOverlayCar.prototype = new BMap.Overlay();
ComplexCustomOverlayCar.prototype.initialize = function(map){
var searchInfoWindowCar = new BMapLib.SearchInfoWindow(map, this._sContent, {
title : this._title, //标题
width : 60, //宽度
height : 115, //高度
panel : "panel",
background : $().getParam('stylePath')+'/resources/imgs/S_div.png',
enableAutoPan : true, //自动平移
searchTypes :[]
});
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.cursor="pointer";
div.appendChild(document.createTextNode(this._text));

if("Y"==this._isStart){//是起点
if(this._color=="red"){
$(div).addClass("map_car_start_chaowen");
}else if(this._color=="green"){
$(div).addClass("map_car_start_zhengchang");
}
}
if("Y"==this._isEnd){//是终点
if(this._color=="red"){
$(div).addClass("map_car_end_chaowen");
}else if(this._color=="green"){
$(div).addClass("map_car_end_zhengchang");
}
}
if("Y"!=this._isStart && "Y"!=this._isEnd){//不是起点不是终点
if(this._color=="red"){
$(div).addClass("map_car_jinggao");
}else if(this._color=="green"){
$(div).addClass("map_car_zhengchang");
}
}

var that= this;
div.onmouseover = function(){
if(this._color=="red"){
$(div).addClass("map_car_jinggao");
}else if(this._color=="yellow"){
$(div).addClass("map_car_chaoshi");
}else if(this._color=="green"){
$(div).addClass("map_car_zhengchang");
}
//打开悬浮曾
searchInfoWindowCar.open(new BMap.Marker(that._point));
};
div.onmouseout = function(){
if(this._color=="red"){
$(div).removeClass("map_car_jinggao");
}else if(this._color=="yellow"){
$(div).removeClass("map_car_chaoshi");
}else if(this._color=="green"){
$(div).removeClass("map_car_zhengchang");
}
//关闭悬浮层
searchInfoWindowCar.close(new BMap.Marker(that._point));
};

map.getPanes().labelPane.appendChild(div);

return div;
};
ComplexCustomOverlayCar.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x-17+"px";
this._div.style.top = pixel.y-40+ "px";
};

码农公寓

相关文章