百度地图api描绘车辆历史轨迹图
最近公司在做项目需需求:车辆定位后在地图显示历史轨迹的功能
一开始使用了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描绘车辆历史轨迹图的更多相关文章
- Android使用百度地图API实现GPS步行轨迹
百度地图Android SDK下载:http://developer.baidu.com/map/sdkandev-download.htm 下面是效果: 采样点取得太频繁所以看起来像是一个个点... ...
- 使用百度地图API实现轨迹回放
调用百度地图API实现路线的轨迹回放功能其实很简单,只要搞懂以下几点即可: 1.需要用Polyline方法先绘制好路线图 2.用Marker添加标注点 3.关键一步,通过结合定时器,使用Marker创 ...
- 百度地图API,根据经纬度实现车辆移动轨迹绘制
百度地图,实现车辆轨迹绘制 实现思路: 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现,Polyline(折线)绘制轨迹,Marker(图标)绘制小车图标 3.将每两个坐标间连 ...
- 百度地图API 绘制轨迹历史
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- web端百度地图API实现实时轨迹动态展现
最近在工作中遇到了一个百度地图api中的难题,恐怕有的程序员可能也遇到过.就是实时定位并显示轨迹,网上大部分都是通过创建polyline对象贴到地图上.当然,百度地图的画线就是这样实现的,但是好多人会 ...
- 【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
- 【百度地图API】百度API卫星图使用方法和卫星图对比工具
原文:[百度地图API]百度API卫星图使用方法和卫星图对比工具 百度地图API推出卫星图接口也有一个月啦~ 本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具. 一.百度 ...
- 【百度地图API】发布静态图API啦!只需一个网址,即可展示定制百度地图!
原文:[百度地图API]发布静态图API啦!只需一个网址,即可展示定制百度地图! 摘要: 百度地图静态图API!您无须执行任何“特殊”操作便可在网页上显示此图片. 不需要 JavaScript.我们只 ...
- 【百度地图API】北京周边7日游——图标按路线轨迹行动
原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...
随机推荐
- 【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) ...
- C#中XML文档注释编译DLL引用到其它项目
引用地址:http://zhidao.baidu.com/link?url=jSGYEBysE4gBExtNsHCVk3vd2OK2cMlaf02cS79GdRuGueTBdFJB0btOdBYkg_ ...
- postman-3断言
用例3A原则: arrange:初始化测试对象 act:操作.接口测试中通过不同的参数调用接口. assert:断言 snippets提供了一些断言的使用方法. 在新版的postman中,test中方 ...
- 给iOS开发新手送点福利,简述UITextField的属性和用法
UITextField属性 0. enablesReturnKeyAutomatically 默认为No,如果设置为Yes,文本框中没有输入任何字符的话,右下角的返回按钮是disabled的. ...
- Creating an Android Project(创建一个android项目)
一个android项目包含了你的应用程序中的所有源代码文件,我们可以通过android sdk tools轻松地创建一个拥有默认文件跟文件夹的android项目. 这部分课程我们将展示两种创建andr ...
- Wasserstein距离 和 Lipschitz连续
EMD(earth mover distance)距离: 在计算机科学与技术中,地球移动距离(EMD)是一种在D区域两个概率分布距离的度量,就是被熟知的Wasserstein度量标准.不正式的说,如果 ...
- logger 的使用 二logback使用配置详解
下面是一些最基本的,详细的参考:https://logback.qos.ch/manual/index.html 我的使用:把error日志打印在另一个文件,可以用ELK 统一管理 最近使用: < ...
- SO_LINGER
[SO_LINGER] 在默认情况下,当调用close关闭socket的使用,close会立即返回,但是,如果send buffer中还有数据,系统会试着先把send buffer中的数据发送出去,然 ...
- objects & values & types
[objects & values & types] 1.Every object has an identity, a type and a value. An object’s i ...
- Spring的Cache注解
Spring的Cache注解如下所示: @CacheConfig:主要用于配置该类中会用到的一些共用的缓存配置.在这里@CacheConfig(cacheNames = "users&quo ...