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
}
);
});
251-AMap.MarkerClusterer聚合点自定义点击会重复触发
原创
©著作权归作者所有:来自51CTO博客作者认真的coder的原创作品,请联系作者获取转载授权,否则将追究法律责任

提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
SpringBoot自定义starter
SpringBoot自定义starter
spring maven ci -
百度地图点聚合MarkerClusterer,性能优化
百度地图点聚合MarkerClusterer,性能优化
i++ 数组 ico 外包 缩放 -
AOP自定义注解实现防重复点击
Spring AOP
AOP 防重复点击 自定义注解 数据 json -
flink自定义timewindow flink自定义聚合函数
一、概述 Flink 的AggregateFunction是一个基于中间计算结果状态进行增量计算的函数。由于是迭代计算方式,所以,在窗口处理过程中,不用缓存整个窗口的数据,所以效率执行比较高。二、AggregateFunction接口类 AggregateFunction 比 ReduceFunction 更加的通用
flink自定义timewindow flink 自定义 窗口 flink apache ide -
Untiy 调用python
1、模块调用: 定义:其实模块简单说就是一堆代码实现某个功能,它们是已经写好的.py文件。只需要用import应用即可。 分类: 1、自定义模块 2、内置标准模块(又称标准库) 3、开源模块 1、自定
Untiy 调用python shell python 操作系统 Code