项目中，需求：在百度地图上实时画出车辆，并能点击车辆弹出信息框查看实时信息。
实现：通过不停的画覆盖物并删除掉。点击覆盖物时弹出信息窗口。
问题：删除掉覆盖物后信息窗也删除掉了。因为信息窗是建立在覆盖物的基础上的。
如何做到，我点击覆盖物弹出信息框，信息框能够持续显示实时信息，直到点击关闭？
做下笔记，包括了自定义覆盖物标识、自定义信息窗口、信息窗口显示实时信息、清除覆盖物时信息窗口的显示问题等等。
贴张效果图：
代码：(频繁的添加和删除覆盖物，可能会有闪烁的问题，建议更新时单个删除不要的，不要一次性删除所有覆盖物)
<script type="text/javascript">var chooseDivId=new Array();//保存信息窗口中显示的divIdfunction 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);//beijingvar 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' οnclick='setTab(\"0\",\"con_one_\",2)'>实时信息</li>"+"<li id='one1' οnclick='setTab(\"1\",\"con_one_\",2)'>司机信息</li>"+"<li id='one2' οnclick='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='/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);//图片加载完毕重绘infowindowdocument.getElementById('imgDemo').onload = function (){infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏 }});infoWindow.addEventListener("clickclose",function(){//点击信息窗口的关闭按钮时触发此事件carIdArr=[];chooseDivId=[];});},0); } </script>
