项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息。

实现:通过不停的画覆盖物并删除掉。点击覆盖物时弹出信息窗口。

问题:删除掉覆盖物后信息窗也删除掉了。因为信息窗是建立在覆盖物的基础上的。

如何做到,我点击覆盖物弹出信息框,信息框能够持续显示实时信息,直到点击关闭?

做下笔记,包括了自定义覆盖物标识、自定义信息窗口、信息窗口显示实时信息、清除覆盖物时信息窗口的显示问题等等。

贴张效果图:

   

代码:(频繁的添加和删除覆盖物,可能会有闪烁的问题,建议更新时单个删除不要的,不要一次性删除所有覆盖物)

  <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>
posted on 2015-10-20 18:55  Joanna.Yan  阅读(9123)  评论(0编辑  收藏  举报