高德地图-聚合点效果-遮罩层弹框

项目需求：

1 根据左侧类型是否勾选，在地图上动态呈现该类型的图标数据；
2 点击每个marker点坐标弹出相对应信息数据；

备注：由于类型较多，单个类型数据量较多，采用聚合点效果，根据是否选中，动态在地图里进行追加marker点图标；

一： 引入

二： 定义全局对象

聚合点对象

var juheAll = {
	clusterHjd:[];
}

marker点数据

var markerAll = {
	jyzhan:[];
}

三： 拿到将要遍历的数据

var list = [{lng:'',lat:'',name:''},{},{}];

四： 点击左侧check框，判断是否选中

function selectCheck(arr,type){
	if(type == "救援站"){
		arr.checked?fireStart(true):fireStart(false)
	}
}

五： 运行遍历方法

fucntion fireStart(type){
	//根据type判断是勾选还是取消勾选
	if(type){
		//清空markerAll对象中存储的marker点数据、聚合点数据
		markerAll.jyzhan = [];
		juheAll.clusterHjd = [];
		let title = "救援站信息";
		let xfData = list;
		if(xfData.length>0){
			xfData.forEach(item => {
				 if(!item.lng || !item.lat){ return }//如果经纬度错误则停止（不严谨，此处可以再进行优化）
				 
				 //定义数据
				 let contentHTML = {};
				 contentHTML.name = item.name;
				 .....
				 
				 let marker = new AMap.Marker({
	                map: map,
	                position: [contentHTML.lng, contentHTML.lat],
	                icon: new AMap.Icon({image: '', imageSize: new AMap.Size(30, 30)}),
	                offset: new AMap.Pixel(-15,-15)
	            });
	            
				 //追加到markerAll对象数组中
				 markerAll.jyzhan.push(marker);
				 
				 //鼠标点击marker弹出自定义的信息窗体
	            AMap.event.addListener(marker, 'click', function () {
	                infoWindow.open(map, marker.getPosition());
	            });
	            let infoWindow = new AMap.InfoWindow({
	                isCustom: true,
	                content: createInfoWindow(title, contentHTML),
	                offset: new AMap.Pixel(16, -15)
	            });
	            
	            //构建自定义窗体
	            function createInfoWindow(title, content) {
	                let inf = document.createElement("div");
	                inf.className = "amap-icon1"
	                //头部
	                var head = document.createElement("div");
	                head.className = "amap-icon-head";
	                head.innerHTML = title;
	                inf.appendChild(head);
	                //身体
	                var body = document.createElement("div");
	                body.className = "amap-icon-body";
	                var span0 = document.createElement("span");  //类型
	                var span1 = document.createElement("span");  //所属街道
	                var span2 = document.createElement("span"); //所属大队
	                var span3 = document.createElement("span"); //中队名称
	                var span4 = document.createElement("span");  //防火员  防火员电话
	                var span5 = document.createElement("span");  //负责人  负责人电话
	                var span6 = document.createElement("span");	 //中队地址


	                span1.innerHTML = '所属街道：' + content.streetName;
	                span2.innerHTML = '所属大队：' + content.ddname;
	                span3.innerHTML = '名称：' + content.name;
	                span4.innerHTML = '防火员：' + content.firemanId + ' ' + content.firemanPhone;
	                span5.innerHTML = '负责人：' + content.zgName + ' ' + content.zgPhone;
	                span6.innerHTML = '地址：' + content.address;

	                body.appendChild(span1)
	                body.appendChild(span2)
	                body.appendChild(span3)
	                body.appendChild(span4)
	                body.appendChild(span5)
	                body.appendChild(span6)
	                inf.appendChild(body);

	                //尾部
	                var bottom = document.createElement("div");
	                var bottom_content = document.createElement("div");
	                var bottom_button = document.createElement("input");
	                bottom.className = "amap-icon2";
	                bottom_content.className = "amap-icon-buttom";
	                bottom_button.className = "btn-background";
	                bottom_button.type = "button";
	                bottom_button.value = "关闭";
	                bottom_button.onclick = closeInfoWindow;
	                bottom_content.appendChild(bottom_button);
	                bottom.appendChild(bottom_content);
	                inf.appendChild(bottom);
	                
	                var sharp = document.createElement("img");
	                sharp.src = "https://webapi.amap.com/images/sharp.png";
	                sharp.style.float = 'left';
	                sharp.style.position = 'relative';
	                sharp.style.left = '230px';
	                sharp.style.height = '23px';
	                inf.appendChild(sharp);
	                
	                return inf;
	            }
			})
			
			//聚合样式
			var count = markerAll.jyzhan.length;
			var _renderClusterMarker = function (context) {
	            var factor = Math.pow(context.count / count, 1 / 18);
	            var div = document.createElement('div');
	            var Hue = 180 - factor * 180;
	            var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
	            var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
	            var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
	            var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
	            div.style.backgroundColor = bgColor;
	            var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
	            div.style.width = div.style.height = size + 'px';
	            div.style.border = 'solid 1px ' + borderColor;
	            div.style.borderRadius = size / 2 + 'px';
	            div.style.boxShadow = '0 0 1px ' + shadowColor;
	            div.innerHTML = context.count;
	            div.style.lineHeight = size + 'px';
	            div.style.color = fontColor;
	            div.style.fontSize = '14px';
	            div.style.textAlign = 'center';
	            context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
	            context.marker.setContent(div)
	        };
	        var sts = [{
                url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
                size: new AMap.Size(32, 32),
                offset: new AMap.Pixel(-16, -16)
            }, {
                url: "https://a.amap.com/jsapi_demos/static/images/green.png",
                size: new AMap.Size(32, 32),
                offset: new AMap.Pixel(-16, -16)
            }, {
                url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
                size: new AMap.Size(36, 36),
                offset: new AMap.Pixel(-18, -18)
            }, {
                url: "https://a.amap.com/jsapi_demos/static/images/red.png",
                size: new AMap.Size(48, 48),
                offset: new AMap.Pixel(-24, -24)
            }, {
                url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
                size: new AMap.Size(48, 48),
                offset: new AMap.Pixel(-24, -24)
            }];
	        
	        juhe.clusterHjd= new AMap.MarkerClusterer(map, markerAll.jyzhan, {
                styles: sts,
                gridSize: 80
            });
	        
		}
	}else{
		map.remove(markerAll.jyzhan);
		juhe.clusterHjd.clearMarkers()
	}
}