map.plugin(["AMap.MarkerClusterer"],function() {
let cluster = null;
var count = pointerList.length;
let clickFlag = false;
function renderClusterMarker(context){
console.log("renderClusterMarker..5.")
let contextCount = context.count;
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,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 5px ' + 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);
let contextMarker = context.marker;
context.marker.off("click");
context.marker.on('click', function(e) {
//每次点击聚合点,至少触发2次,为何?
//原因未知
console.log("context.marker.click...3")
if(clickFlag==true){
return false;
}
let extDataArr = [];
let clusterData = context.clusterData;
for(let i=0;i<clusterData.length;i++){
extDataArr.push(clusterData[i].extData);
}
if(clusterData.length != contextCount){
let extDataArrOther = map_active.getOtherMarkers({contextMarker:contextMarker,extDataArr:extDataArr,contextCount:contextCount})
if(extDataArrOther &&extDataArrOther.length>0){
extDataArr = extDataArr.concat(extDataArrOther)
}
}
let mapZoom = map.getZoom(0);
if(extDataArr.length>20 && mapZoom<17){
return alert("请放大地图再进行查看")
}
let infoWindowContent = '<div class="custom-arr">';
for(let i=0;i<extDataArr.length;i++){
let idx = i+1;
infoWindowContent+= '<div><span>'+idx+'、'+extDataArr[i].sname+'</span><a onclick="window.map_active.openCustomerContent(\"'+extDataArr[i].id+'\")">查看</a></div>';
}
infoWindowContent+='</div>';
var infoWindow = new AMap.InfoWindow({
content: infoWindowContent,
offset: [90,-90],
closeWhenClickMap:true,
autoMove:true
});
infoWindow.open(map,contextMarker.getPosition());
setTimeout(function (){
clickFlag = false;
},2000)
});
}
function renderMarker({data,marker}){
console.log("renderMarker...1")
let len = data.length;
// console.log("marker",marker)
let rec = data[0].extData;
let lnglat = data[0].lnglat;
let labelOps = {};
labelOps['content'] = rec.content?rec.content:'';
labelOps['direction'] = 'center';
let markerOps = {
label:labelOps,
extData:rec
};
// markerOps['anchor'] = anchor;
let hide = window.geo_active.getHide();
if(hide==true){
markerOps['label'] = {};
}
let extData = rec;
var infoWindow = new AMap.InfoWindow({
content: '<div class="custom-menu">' +
'<div>客户名称:'+extData.name+'</div>'+
'<div>法人:'+(extData.faRen||'')+'</div>'+
'<div>联系人:'+(extData.contactName||'')+'</div>'+
'<div>联系电话:'+(extData.phone||'')+'</div>'+
'<div>实际地址:'+(extData.realAddr||'')+'</div>'+
'<div>客户税号:'+(extData.creditCode||'')+'</div>'+
'</div>',
offset: [90,-90],
closeWhenClickMap:true,
autoMove:true
});
marker.setLabel(markerOps['label']);
marker.setExtData(markerOps['extData'])
marker.off("click");
// 监听标记的点击事件
marker.on('click', function(e) {
console.log("marker.click")
zIndex++;
// marker.setzIndex(zIndex);
marker.setTop(true);
// 在点击事件中打开信息窗体
infoWindow.open(map,lnglat);
});
markerList.push(marker);
}
cluster = new AMap.MarkerClusterer(
map, // 地图实例
// markerList,
pointerList, // 海量点数据,数据中需包含经纬度信息字段 lnglat
{
renderMarker:renderMarker,
renderClusterMarker: renderClusterMarker,
maxZoom:19
}
);
});
标签:style,context,自定义,var,let,AMap,MarkerClusterer,marker,div
From: https://blog.51cto.com/u_14816966/9201232