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

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

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>