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

一开始使用了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";
};

百度地图api描绘车辆历史轨迹图的更多相关文章

  1. Android使用百度地图API实现GPS步行轨迹

    百度地图Android SDK下载:http://developer.baidu.com/map/sdkandev-download.htm 下面是效果: 采样点取得太频繁所以看起来像是一个个点... ...

  2. 使用百度地图API实现轨迹回放

    调用百度地图API实现路线的轨迹回放功能其实很简单,只要搞懂以下几点即可: 1.需要用Polyline方法先绘制好路线图 2.用Marker添加标注点 3.关键一步,通过结合定时器,使用Marker创 ...

  3. 百度地图API,根据经纬度实现车辆移动轨迹绘制

    百度地图,实现车辆轨迹绘制 实现思路: 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现,Polyline(折线)绘制轨迹,Marker(图标)绘制小车图标 3.将每两个坐标间连 ...

  4. 百度地图API 绘制轨迹历史

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. web端百度地图API实现实时轨迹动态展现

    最近在工作中遇到了一个百度地图api中的难题,恐怕有的程序员可能也遇到过.就是实时定位并显示轨迹,网上大部分都是通过创建polyline对象贴到地图上.当然,百度地图的画线就是这样实现的,但是好多人会 ...

  6. 【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  7. 【百度地图API】百度API卫星图使用方法和卫星图对比工具

    原文:[百度地图API]百度API卫星图使用方法和卫星图对比工具 百度地图API推出卫星图接口也有一个月啦~ 本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具. 一.百度 ...

  8. 【百度地图API】发布静态图API啦!只需一个网址,即可展示定制百度地图!

    原文:[百度地图API]发布静态图API啦!只需一个网址,即可展示定制百度地图! 摘要: 百度地图静态图API!您无须执行任何“特殊”操作便可在网页上显示此图片. 不需要 JavaScript.我们只 ...

  9. 【百度地图API】北京周边7日游——图标按路线轨迹行动

    原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...

随机推荐

  1. 【BZOJ4445】[SCOI2015]小凸想跑步(半平面交)

    [BZOJ4445][SCOI2015]小凸想跑步(半平面交) 题面 BZOJ 洛谷 题解 首先把点给设出来,\(A(x_a,y_a),B(x_b,y_b),C(x_c,y_c),D(x_d,y_d) ...

  2. C#中XML文档注释编译DLL引用到其它项目

    引用地址:http://zhidao.baidu.com/link?url=jSGYEBysE4gBExtNsHCVk3vd2OK2cMlaf02cS79GdRuGueTBdFJB0btOdBYkg_ ...

  3. postman-3断言

    用例3A原则: arrange:初始化测试对象 act:操作.接口测试中通过不同的参数调用接口. assert:断言 snippets提供了一些断言的使用方法. 在新版的postman中,test中方 ...

  4. 给iOS开发新手送点福利,简述UITextField的属性和用法

    UITextField属性 0.     enablesReturnKeyAutomatically 默认为No,如果设置为Yes,文本框中没有输入任何字符的话,右下角的返回按钮是disabled的. ...

  5. Creating an Android Project(创建一个android项目)

    一个android项目包含了你的应用程序中的所有源代码文件,我们可以通过android sdk tools轻松地创建一个拥有默认文件跟文件夹的android项目. 这部分课程我们将展示两种创建andr ...

  6. Wasserstein距离 和 Lipschitz连续

    EMD(earth mover distance)距离: 在计算机科学与技术中,地球移动距离(EMD)是一种在D区域两个概率分布距离的度量,就是被熟知的Wasserstein度量标准.不正式的说,如果 ...

  7. logger 的使用 二logback使用配置详解

    下面是一些最基本的,详细的参考:https://logback.qos.ch/manual/index.html 我的使用:把error日志打印在另一个文件,可以用ELK 统一管理 最近使用: < ...

  8. SO_LINGER

    [SO_LINGER] 在默认情况下,当调用close关闭socket的使用,close会立即返回,但是,如果send buffer中还有数据,系统会试着先把send buffer中的数据发送出去,然 ...

  9. objects & values & types

    [objects & values & types] 1.Every object has an identity, a type and a value. An object’s i ...

  10. Spring的Cache注解

    Spring的Cache注解如下所示: @CacheConfig:主要用于配置该类中会用到的一些共用的缓存配置.在这里@CacheConfig(cacheNames = "users&quo ...