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

一开始使用了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. 代码规范 for node.js with 'npm-coding-style'

    npm-coding-style npm's "funny" coding style Description npm's coding style is a bit unconv ...

  2. vim自定义配置之autoComplPop设置

    BundlenInstall安装autoComplPop vimConfig/plugin/autoComplPop-setting.vim "autocomplpop 设置 let g:A ...

  3. [教程]Ubuntu下完整配置自动壁纸切换

    来源:http://www.linuxidc.com/Linux/2016-09/135350.html 更原始的来源就不去找了,如果有找到的同学可以回复我我到时改过来www 来源的教程是有效的,但是 ...

  4. Bootstrap-CL:超大屏幕

    ylbtech-Bootstrap-CL:超大屏幕 1.返回顶部 1. Bootstrap 超大屏幕(Jumbotron) 本章将讲解 Bootstrap 支持的另一个特性,超大屏幕(Jumbotro ...

  5. pandas read_csv读取大文件的Memory error问题

    今天在读取一个超大csv文件的时候,遇到困难:首先使用office打不开然后在python中使用基本的pandas.read_csv打开文件时:MemoryError 最后查阅read_csv文档发现 ...

  6. uva-10815-字符串排序

    又偷懒了,字符串排序,贱贱的用了std:map #include <iostream> #include <sstream> #include<algorithm> ...

  7. Java——jxl读取Excel文件

    1.创建文件流,打开EXCEL文件(jxi不支持.xlsx文件,支持.xls) FileInputStream excelFile = new FileInputStream(excelPath); ...

  8. 「小程序JAVA实战」小程序视频上传方法的抽象复用(57)

    转自:https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxushipinshangchuanfangfadechouxiangfu ...

  9. Spring Boot实践——统一异常处理

    注解说明 @ControllerAdvice,是Spring3.2提供的新注解,从名字上可以看出大体意思是控制器增强.让我们先看看@ControllerAdvice的实现: /** * Special ...

  10. jsp的静态导入

    <body> <!-- include 包括 包含 页面相互引用 静态引入 把多工文件 合并为一个文件 然后在编译 不要有重复的变量 --> <h1>this is ...