标签:
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息。
实现:通过不停的画覆盖物并删除掉。点击覆盖物时弹出信息窗口。
问题:删除掉覆盖物后信息窗也删除掉了。因为信息窗是建立在覆盖物的基础上的。
如何做到,我点击覆盖物弹出信息框,信息框能够持续显示实时信息,直到点击关闭?
做下笔记,包括了自定义覆盖物标识、自定义信息窗口、信息窗口显示实时信息、清除覆盖物时信息窗口的显示问题等等。
贴张效果图:
代码:
<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自定义覆盖物、自定义信息窗口增删时的显示问题
标签:
原文地址:http://www.cnblogs.com/Joanna-Yan/p/4895496.html