百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息。
实现:通过不停的画覆盖物并删除掉。点击覆盖物时弹出信息窗口。
问题:删除掉覆盖物后信息窗也删除掉了。因为信息窗是建立在覆盖物的基础上的。
如何做到,我点击覆盖物弹出信息框,信息框能够持续显示实时信息,直到点击关闭?
做下笔记,包括了自定义覆盖物标识、自定义信息窗口、信息窗口显示实时信息、清除覆盖物时信息窗口的显示问题等等。
贴张效果图:

代码:(频繁的添加和删除覆盖物,可能会有闪烁的问题,建议更新时单个删除不要的,不要一次性删除所有覆盖物)
<script type="text/javascript">
var chooseDivId=new Array();//保存信息窗口中显示的divId
function setTab(divId,divName,zDivCount){
chooseDivId.push(divId);
for (i=0;i<=zDivCount;i++) {
//将所有的层都隐藏
document.getElementById(divName+i).style.display="none";
document.getElementById("one"+i).style.backgroundColor="#E0E2EB";
}
//显示当前层
document.getElementById(divName+divId).style.display="block";
document.getElementById("one"+divId).style.backgroundColor="#FFFFFF";
} // 百度地图API功能
var baiduMap = new BMap.Map("allmap",{mapType:BMAP_SATELLITE_MAP});
//var point = new BMap.Point(121.38750613, 31.1743319);//shanghai
//var point = new BMap.Point(116.404, 39.915);//beijing
var lon=${serverLon.value};
var lat=${serverLat.value};
if(lon==null||lat==null){
//默认中心坐标在北京
var point = new BMap.Point(116.404, 39.915);//beijing
}else{
var point = new BMap.Point(lon, lat);
}
baiduMap.centerAndZoom(point, 15);
//画小车
var myIcon = new BMap.Icon("../../../../IGS/image_driverExam/images/car.png", new BMap.Size(41,90)); //保存点击了的需要弹出信息窗口的marker,以carId作为标识
var carIdArr=new Array();
function drawBaiduMapCar(carId,lon,lat,carDeg){
baiduMap.clearOverlays();
setTimeout(function(){ //alert("==="+carId);
var pt = new BMap.Point(lon, lat);
//var pt = new BMap.Point(121.38750613, 31.1743319);
var marker = new BMap.Marker(pt,{icon:myIcon});
var sContent="<div class='tab1' id='tab1'>"+
"<div class='menuyq'>"+
"<ul><li id='one0' style='background-color:#ffffff' onclick='setTab(\"0\",\"con_one_\",2)'>实时信息</li>"+
"<li id='one1' onclick='setTab(\"1\",\"con_one_\",2)'>司机信息</li>"+
"<li id='one2' onclick='setTab(\"2\",\"con_one_\",2)'>车辆资料</li>"+
"</ul>"+
"<div class='menudiv'>"+
"<div id='con_one_0'>"+
"上海市闵行区莲花路。。。。。<br/>"+
"车牌号:"+carId+"<br/>"+
"经度:"+lon+"<br/>"+
"纬度:"+lat+"<br/>"+
"</div>"+
"<div id='con_one_1' style='display:none;'>司机信息==========="+
"<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>"+
"</div>"+
"<div id='con_one_2' style='display:none;'>车辆资料==========</div>"+
"</div>"+
"</div>";
var infoWindow=new BMap.InfoWindow(sContent);//创建信息窗口对象
infoWindow.disableAutoPan();//关闭打开信息窗口时地图自动平移。
var label=new BMap.Label(carId);
label.setStyle({marginTop:"40px",marginLeft:"5px",color:"#006DFF",fontSize:"12px"});
marker.setLabel(label);
marker.setRotation(carDeg);
//添加覆盖物
baiduMap.addOverlay(marker);
if(carIdArr.indexOf(carId)==0){//前面点击过,还需要继续显示
marker.openInfoWindow(infoWindow);
if(chooseDivId.length!=0){
setTab(chooseDivId[chooseDivId.length-1],"con_one_",2);//取最后一次点击的项
}else{
setTab("0","con_one_",2);
}
document.getElementById('imgDemo').onload = function (){
infoWindow.redraw();
}
}
marker.addEventListener("click",function(){
if(carIdArr.indexOf(carId)==-1){
carIdArr=[];//清空
carIdArr.push(carId);
}
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
document.getElementById('imgDemo').onload = function (){
infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
}
}); infoWindow.addEventListener("clickclose",function(){//点击信息窗口的关闭按钮时触发此事件
carIdArr=[];
chooseDivId=[];
}); },0);
}
</script>
百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题的更多相关文章
- 百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
- 百度地图JavaScript API使用
最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...
- 百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
- 【百度地图JavaScript API】手机端浏览器定位的实现
[百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476
- 百度地图JavaScript API V1.5初级开发工具类
/** * 百度地图使用工具类-v1.5 * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email boo ...
- 百度地图Javascript API 调用示例
调用示例 !<!DOCTYPE html> <html> <head> <title>百度地图DEMO</title> </head& ...
- 基于百度地图JavaScript API,员工住址统计
公司一般都有通讯和住址的统计,但是文字化的表格根本就不知道住在哪. 用百度地图就可以轻松解决, 而且公司还经常人员变动,读取excel中的内容,就不用每次还要更改地图文件了. 在遇到需要聚餐在地图中标 ...
- 百度地图 JavaScript API 极速版 开发体会
前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...
- 百度地图JavaScript API本地搜索的结果面板
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- C语言-数据类型
数据类型 -基本数据类型 --char 字符型 --int 整型 --浮点型 ---float ---double -指针类型 --void* -空类型 -构架类型 --数组[] --结构体 str ...
- 对初学者的MPLS 常见问题
对初学者的MPLS 常见问题 2015年6月8日 16:04 阅读 186 问:什么是多协议标签交换 (MPLS)? 答:MPLS是一种数据包转发技术,该技术使用标签来做出数据转发决策. 利用MPLS ...
- html中使用js+table 实现分页
本文在html中利用js+table实现分页.主要思想是先对table中的所有数据隐藏,然后通过当前页面(currPageNum)来计算当前页要显示的行,并显示出来,首页.下一页.上一页.尾页都依此来 ...
- 关于echart横轴颜色 纵轴颜色 以及文本颜色的修改
xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'], axi ...
- 调试SQLSERVER (二)使用Windbg调试SQLSERVER的环境设置
调试SQLSERVER (二)使用Windbg调试SQLSERVER的环境设置 调试SQLSERVER (一)生成dump文件的方法调试SQLSERVER (三)使用Windbg调试SQLSERVER ...
- Angularjs路由需要了解的那点事
Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...
- 使用 Productivity Power Tools 高级扩展 来帮助你提高 VS2012 的工作效率
Productivity Power Tools 高级工具是帮助开发者提高工作效率的, 用于 Visual Studio 2012 专业版(及以上) 的一组免费扩展. 本文大多数内容译自MSDN:ht ...
- [后端人员耍前端系列]KnockoutJs篇:快速掌握KnockoutJs
一.引言 之前这个系列文章已经介绍Bootstrap.由于最近项目中,前端是Asp.net MVC + KnockoutJs + Bootstrap来做的.所以我又重新开始写这个系列.今天就让我们来看 ...
- Java设计模式3:工厂方法模式
工厂方法模式 工厂方法模式是类的创建模式.工厂方法模式的用意是定义一个创建产品对象的工厂接口,将实际创建工厂推迟到子类中. 工厂方法模式 工厂方法模式是对简单工厂模式进一步抽象的结果. 假如是不使用反 ...
- Kinect for Windows SDK 1.8的改进及新特性
今年3月, 微软推出了Kinect for Windows SDK 1.7 更新,包括了手势识别 Kinect Interactions 和实时 3D 建模 Kinect Fusion 两项新技术. ...