最近公司在做项目需需求:车辆定位后在地图显示历史轨迹的功能
一开始使用了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"; };
|