首页 > 其他分享 >251-AMap.MarkerClusterer聚合点自定义点击会重复触发

251-AMap.MarkerClusterer聚合点自定义点击会重复触发

时间:2024-01-11 17:34:04浏览次数:21  
标签:style context 自定义 var let AMap MarkerClusterer marker div

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

相关文章

  • springBoot自定义拦截器
    编写FuelH5InterceptorConfig配置类packagecom.fuel.framework.config;importcom.fuel.framework.interceptor.FuelH5Interceptor;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.context.annotation.Configuration;importorg......
  • 27-K8 CRD:如何根据需求自定义你的 API?
    随着使用的深入,你会发现Kubernetes中内置的对象定义,比如Deployment、StatefulSet、Configmap,可能已经不能满足你的需求了。你很希望在Kubernetes定义一些自己的对象,一来可以通过kube-apiserver提供统一的访问入口,二来可以像其他内置对象一样,通过kubectl命令管理这些自定......
  • 【转】C# WinForm 自定义控件,DataGridView背景透明,TabControl背景透明
    原文:https://www.cnblogs.com/leavind/p/6732530.html 1usingSystem.ComponentModel;2usingSystem.Drawing;3usingSystem.Windows.Forms;4namespaceRaywindStudio.Components5{6publicclassTabCtrlX:TabControl7{8publicT......
  • Vue2 使用 Knova Canvas 合成图片、多个视频、音频在一个画面中并播放,自定义 video co
    本文转载https://blog.csdn.net/RosaChampagne/article/details/128020428?spm=1001.2014.3001.5502的文章安装插件npminstallvue-konva@2konva--save在main.js中使用importVuefrom'vue';importVueKonvafrom'vue-konva';Vue.use(VueKonva);相关实现代......
  • 250-AMap.InfoWindow 高德地图信息窗体关闭后的回调
    varinfoWindow2=newAMap.InfoWindow({content:infoWindowContent,offset:[50,-60],closeWhenClickMap:true,//autoMove:false,/*close:function(){console.log("infoWindow2.close")windowMap.get(parseInt(id)......
  • 使用Winform开发自定义用户控件,以及实现相关自定义事件的处理
    在我们一些非标的用户界面中,我们往往需要自定义用户控件界面,从而实现不同的内容展示和处理规则,本篇内容介绍使用Winform开发自定义用户控件,以及实现相关自定义事件的处理。1、用户控件的界面分析对于比较规范的界面,需要进行一定的分析,以便从中找到对应的规则,逐步细化为自定义用......
  • 自定义快捷键实操与踩坑
    0.缘起要做一个自定义快捷键的功能,web端实现。这里分为两块逻辑,一部分是快捷键的应用,一部分是快捷键的定义。先从应用说起,快捷键实际上是对浏览器按键动作的监听,不过由于浏览器本身也有快捷键,就会有冲突的情况,自定义的要求应运而生。快捷键的定义,其实类似于设置的功能,也是存、......
  • go 新建一个自定义包
    一、概述在go中新建一个自定义包供其他包使用。步骤:1.新建一个目录2.目录下新建一个xxx.go文件3.在xxx.go文件中使用packagexxx(包名)4.此时你的包已经新建好了5.在需要使用上面包的地方导入即可,如:import"xxxx"p......
  • springboot通过自定义注解@Log实现日志打印
    springboot通过自定义注解@Log实现日志打印效果图实操步骤注意,本代码在springboot环境下运行,jdk1.81.引入依赖<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId></dependency><dependency>......
  • 自定义ADFS登录页
    修改adfs登录页公司名称:Set-AdfsGlobalWebContent-CompanyName"ExchangeOWA" 参考:ADFS自定义:https://learn.microsoft.com/zh-cn/windows-server/identity/ad-fs/operations/ad-fs-customization-in-windows-server#custom-themes-and-advanced-custom-themes 修改ADFS登录页......