百度地图中实现历史轨迹显示为BMap.InfoWindow添加多个不同时间点但相同经纬度点的信息
2016-12-03 20:37
811 查看
今天应boss要求实现巡更,既然是巡更,那么几个点在轮巡,那么显示历史轨迹时后面时刻的点的信息会覆盖前面时刻的信息,如何在一个marker上显示不同时间点的信息呢??
主要时取数据时的循环问题,后台放回的数据不变,在前台进行判断如果第i个返回的点的坐标已经在地图上显示,则显示此点的InfoWindow时,在原来的信息上追加新的信息(保留原来的信息)。因为可能重复取数据等等问题,经验不够绕来绕去终于解决了。
代码如下:
var pointarr=new Array();
for(var i = 0; i < msg.hislist.length; i++){
//alert(msg.hislist[i].point_id);
if(pointarr.indexOf(i)>-1){
//alert('跳出循环');//判断是否已经已经显示过该点的信息,避免重复。
continue;}
var marker=new BMap.Marker(
new BMap.Point(msg.hislist[i].GPS_LONG,msg.hislist[i].GPS_LAT)
);
text="<font size='2' color='#0066FF'>定位位置:</font> "+"<font size='2'>"+msg.hislist[i].address+"</font>"+"<hr style='color:#0066FF'><font size='2' color='#0066FF'>巡更人员:</font> "+"<font size='2'>"+msg.hislist[i].name+"</font>"+"<hr style='color:#0066FF'><font size='2' color='#0066FF'>定位时间:</font> "+"<font size='2'>"+msg.hislist[i].GPS_UTC+"</font>"+"<hr style='color:#0066FF'>";
for (var j=i+1;j< msg.hislist.length; j++){
if(msg.hislist[j].point_id==msg.hislist[i].point_id){
pointarr.push(j);//将已经显示过的点保存在一个数组中,这里每个点的point_id就代表巡更点的编号,也就是将相同巡更点的历史轨迹信息保存在同一个数组中
var textadd="<font size='2' color='#0066FF'>巡更人员:</font> "+"<font size='2'>"+msg.hislist[j].name+"</font>"+"<hr style='color:#0066FF'><font size='2' color='#0066FF'>定位时间:</font> "+"<font size='2'>"+msg.hislist[j].GPS_UTC+"</font>"+"<hr style='color:#0066FF'>";
text=text+textadd;
}
}
var infoWindow = new BMap.InfoWindow(text);
marker.infoWindow=infoWindow;
marker.addEventListener("click",function(e){
this.openInfoWindow(e.target.infoWindow)
});
maplet.addOverlay(marker);
}
最后的效果如下:
主要时取数据时的循环问题,后台放回的数据不变,在前台进行判断如果第i个返回的点的坐标已经在地图上显示,则显示此点的InfoWindow时,在原来的信息上追加新的信息(保留原来的信息)。因为可能重复取数据等等问题,经验不够绕来绕去终于解决了。
代码如下:
var pointarr=new Array();
for(var i = 0; i < msg.hislist.length; i++){
//alert(msg.hislist[i].point_id);
if(pointarr.indexOf(i)>-1){
//alert('跳出循环');//判断是否已经已经显示过该点的信息,避免重复。
continue;}
var marker=new BMap.Marker(
new BMap.Point(msg.hislist[i].GPS_LONG,msg.hislist[i].GPS_LAT)
);
text="<font size='2' color='#0066FF'>定位位置:</font> "+"<font size='2'>"+msg.hislist[i].address+"</font>"+"<hr style='color:#0066FF'><font size='2' color='#0066FF'>巡更人员:</font> "+"<font size='2'>"+msg.hislist[i].name+"</font>"+"<hr style='color:#0066FF'><font size='2' color='#0066FF'>定位时间:</font> "+"<font size='2'>"+msg.hislist[i].GPS_UTC+"</font>"+"<hr style='color:#0066FF'>";
for (var j=i+1;j< msg.hislist.length; j++){
if(msg.hislist[j].point_id==msg.hislist[i].point_id){
pointarr.push(j);//将已经显示过的点保存在一个数组中,这里每个点的point_id就代表巡更点的编号,也就是将相同巡更点的历史轨迹信息保存在同一个数组中
var textadd="<font size='2' color='#0066FF'>巡更人员:</font> "+"<font size='2'>"+msg.hislist[j].name+"</font>"+"<hr style='color:#0066FF'><font size='2' color='#0066FF'>定位时间:</font> "+"<font size='2'>"+msg.hislist[j].GPS_UTC+"</font>"+"<hr style='color:#0066FF'>";
text=text+textadd;
}
}
var infoWindow = new BMap.InfoWindow(text);
marker.infoWindow=infoWindow;
marker.addEventListener("click",function(e){
this.openInfoWindow(e.target.infoWindow)
});
maplet.addOverlay(marker);
}
最后的效果如下:
相关文章推荐
- 基于Google提供play-services:9.8.0的Google 地图开发,适用于Activity、Fragment,并实现添加Marker和根据经纬度显示运动轨迹
- 百度地图显示历史轨迹时经纬度的处理方法
- 关于百度地图 BMap.InfoWindow 只显示最后一条信息解决方法
- 使用linux的shell脚本实现在当前行重复动态显示时间等字符串信息(不另起新行)
- 嵌入式 显示软件或者程序最先建立的时间以及版本信息宏的实现
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(七) 之 历史记录查询(时间,关键字,图片,文件),关键字高亮显示。
- Cocos2d-JS中CollectionView实现不同大小Cell同时显示的技巧(ListView中添加显示标签)
- 用C语言模拟实现一个通讯录,要求实现其添加、删除、修改、查找、显示和排序联系人信息的功能
- Android中两种不同的方法实现实时更新时间,是显示时间和系统时间同步
- 安卓实现在百度地图上播放历史轨迹
- 解决apk添加签名之后不显示百度地图获取定位信息
- SQLite数据库储存图片信息,GridView显示,基本实现添加、删除图标操作 ... ...
- 安卓实现在百度地图上播放历史轨迹
- 百度地图添加marker并获取InfoWindow里面的内容,实现marker的增加、删除、编辑
- 用jsp实现一个简单的购物车web应用系统。实现的添加购物商品,删除购物商品并且显示购物车信息。
- JAVA实现多用户接收服务器发送相同信息并显示各自屏幕上
- 百度地图之调用javaScript api接口实现多点标注及显示提示信息
- 关于在GridView模版里添加DropDownList实现根据下拉列表的不同选择gridview根据条件筛选显示。
- 实现客户信息显示和添加
- Web项目实现通过经纬度获取城市信息---利用百度地图