百度地图添加标识物，并能控制标识物显示隐藏

<%@ page contentType=“text/html;charset=UTF-8”%> <%@ include file="/WEB-INF/views/include/taglib.jsp"%>

GIS地图

body { height: 100%; margin: 0px; padding: 0px; }

#container { height: 100%; } .tongj{ width: 300px; margin-top: 11px; } .lj{ display: inline-block; width: 150px; text-align: right; font-size: 12px; color: #000000; } .ljy{ display: inline-block; font-size: 16px; color: #000000; margin-left: 10px; } .fuh{ font-size: 12px; color: #000000; }

累计充值: ${lishi.chongzhi} 元 累计用电量: ${lishi.totol} kw/h 累计使用次数: ${lishi.cishu} 次 累计使用金额: ${lishi.jine} 元 累计未使用余额: ${lishi.money} 元 <div id="container"></div> <script type='text/javascript'> //提示：下面的代码用jquery，所以如果有不能运行的情况请引用后尝试 //百度地图api container对应前端div名称 前端要引用2.0版本的百度地图api //需引用api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js var map = new BMap.Map("container"); // 创建地图实例，禁止点击地图底图 var cityName = '合肥'; map.centerAndZoom(cityName, 8); // 初始化地图,设置中心点坐标和地图级别。 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.enableScrollWheelZoom(true); map.addControl(new BMap.OverviewMapControl({ anchor : BMAP_ANCHOR_BOTTOM_RIGHT, isOpen : 1 })); //添加缩略地图控件 map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE ,anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(50, 50)})); var markerArr = new Array(); //后台产品信息集合 $.ajax({ type : "POST", //请求方式 url : "${ctx}/communication/productInfo/getList", //请求方法名字 dataType : "json", contentType : "application/json; charset=utf-8", success : function(msg) { //成功 for (var i = 0; i < msg.length; i++) { var id = msg[i].id; var name = msg[i].productName; /* var lonlat = msg[i].longitude + "," + msg[i].latitude; */ var longitude = msg[i].longitude; var latitude = msg[i].latitude var json_obj = { id : id, title : name, longitude : longitude, latitude : latitude /* point : lonlat */ }; markerArr.push(json_obj); biaoshi1(); } }, error : function(obj, msg, e) { //异常 alert("请求异常，请联系管理员"); } }); function biaoshi1(){ map.clearOverlays();//清除图层覆盖物 var bdary = new BMap.Boundary(); bdary.get(cityName, function (rs) { //获取行政区域 map.clearOverlays(); //清除地图覆盖物 //for循环都删除掉了，只剩下这个 //网上查了下，东西经南北纬的范围 var EN_JW = "180, 90;"; //东北角 var NW_JW = "-180, 90;"; //西北角 var WS_JW = "-180, -90;"; //西南角 var SE_JW = "180, -90;"; //东南角 /* 边界 */ /* //4.添加环形遮罩层 var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", fillOpacity:1, strokeOpacity: 0.5 }); //建立多边形覆盖物 map.addOverlay(ply1); //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层 var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#00f",fillColor: "" }); map.addOverlay(ply); /* 边界 */ for (var i = 0; i < markerArr.length; i++) { /* var p0 = markerArr[i].point.split(",")[0]; var p1 = markerArr[i].point.split(",")[1]; */ var longitude=markerArr[i].longitude; var latitude=markerArr[i].latitude; var maker = addMarker(new window.BMap.Point(longitude, latitude)); addInfoWindow(maker, markerArr[i]); (function() { var thePoint = markerArr[i]; maker.addEventListener("click", function() { onMakerClick(this, thePoint); }); })(); } }); } /* 控制显示隐藏 */ function biaoshi2(){ map.clearOverlays();//清除图层覆盖物 var bdary = new BMap.Boundary(); bdary.get(cityName, function (rs) { //获取行政区域 map.clearOverlays(); //清除地图覆盖物 //for循环都删除掉了，只剩下这个 //网上查了下，东西经南北纬的范围 var EN_JW = "180, 90;"; //东北角 var NW_JW = "-180, 90;"; //西北角 var WS_JW = "-180, -90;"; //西南角 var SE_JW = "180, -90;"; //东南角 /* 边界 *///4.添加环形遮罩层 /* var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", fillOpacity:1, strokeOpacity: 0.5 }); //建立多边形覆盖物 map.addOverlay(ply1); //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层 var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#00f",fillColor: "" }); map.addOverlay(ply); */ /* 边界 */ for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].point.split(",")[0]; var p1 = markerArr[i].point.split(",")[1]; var makers = addMarker(new window.BMap.Point(p0, p1)); addInfoWindows(makers, markerArr[i]); (function() { var thePoint = markerArr[i]; makers.addEventListener("click", function() { onMakerClick(this, thePoint); }); })(); } }); } // 添加标注 function addMarker(point) { var myIcon = new BMap.Icon( "${ctxStatic}/images/area.png", new BMap.Size( 23, 25), { offset : new BMap.Size(10, 25), }); var marker = new BMap.Marker(point, { icon : myIcon }); map.addOverlay(marker); return marker; } // 添加信息窗口 function addInfoWindow(marker, poi) { marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 var label = new window.BMap.Label(poi.title, { offset : new window.BMap.Size(20, -10) }); marker.setLabel(label); var clo = ""; if ("我的位置" == poi.title) { clo = "#FF5782"; } else { clo = "#E6FED"; } var info = new window.BMap.InfoWindow( "<p style=’font-size:12px;lineheight:1.8em;color:"+clo+";’>" + poi.title + "</p>"); // 创建信息窗口对象 marker.addEventListener("mouseover", openInfoWinFun); var openInfoWinFun = function() { this.openInfoWindow(info); }; } // 添加信息窗口 function addInfoWindows(markers, poi) { /* markers.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 */ var clo = ""; if ("我的位置" == poi.title) { clo = "#FF5782"; } else { clo = "#E6FED"; } var info = new window.BMap.InfoWindow( "<p style=’font-size:12px;lineheight:1.8em;color:"+clo+";’>" + poi.title + "</p>"); // 创建信息窗口对象 markers.addEventListener("mouseover", openInfoWinFun); var openInfoWinFun = function() { this.openInfoWindow(info); }; } //弹出框样式 var opts = { width : 250, heigth : 80, title : "产品信息", enableMessage : true }; //标注点点击事件 function onMakerClick(thisMakers, thePoint) { var thisMakers = thisMakers; var pid = thePoint.id; var pname = thePoint.title; $.ajax({ type : "POST", //请求方式 url : "${ctx}/communication/productInfo/getIndex", //请求路径：页面/方法名字 data : { "id" : thePoint.id, "name" : thePoint.title }, dataType : "json", success : function(msg) { //成功 var name = msg.productName; var longitude = msg.longitude; var latitude = msg.latitude; var productDesc = msg.productDesc; if (productDesc == "" || productDesc == null) { productDesc = ""; } var totol = msg.totol; if (totol == "" || totol == null) { totol = ""; } var cishu = msg.cishu; if (cishu == "" || cishu == null) { cishu = ""; } var jine = msg.jine; if (jine == "" || jine == null) { jine = ""; } var text = "产品名称：" + name + "<br/>经度：" + longitude + "<br/>纬度：" + latitude + "<br/>产品描述：" + productDesc + "<br/>累计用电量：" + totol+"kw/h" + "<br/>累计使用次数：" + cishu+"次" + "<br/>累计使用金额：" + jine+"元"; console.log(text); var point = new BMap.Point(thisMakers .getPosition().lng, thisMakers .getPosition().lat); var infoWindow = new BMap.InfoWindow( text, opts); map.openInfoWindow(infoWindow, point); }, error : function(obj, msg, e) { //异常 alert("请求异常"); } }); } function updateStatus(status){ var sta = $(status).val() if(sta == "显示"){ $(status).val("隐藏"); biaoshi1(); }else{ $(status).val("显示"); biaoshi2(); } } </script>