項目中，需求：在百度地圖上實時畫出車輛，并能點擊車輛彈出信息框查看實時信息。

實現：通過不停的畫覆蓋物并刪除掉。點擊覆蓋物時彈出信息窗口。

問題：刪除掉覆蓋物后信息窗也刪除掉了。因為信息窗是建立在覆蓋物的基礎上的。

如何做到，我點擊覆蓋物彈出信息框，信息框能夠持續顯示實時信息，直到點擊關閉？

做下筆記，包括了自定義覆蓋物標識、自定義信息窗口、信息窗口顯示實時信息、清除覆蓋物時信息窗口的顯示問題等等。

貼張效果圖：

? ?

代碼：(頻繁的添加和刪除覆蓋物，可能會有閃爍的問題，建議更新時單個刪除不要的，不要一次性刪除所有覆蓋物)

  <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='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>

轉載于:https://www.cnblogs.com/Joanna-Yan/p/4895496.html

總結

以上是生活随笔為你收集整理的百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。