网页嵌入高德地图聚合点标记点添加点击事件

共计 6275 个字符，预计需要花费 16 分钟才能阅读完成。
在网页中嵌入高德地图，效果如下：

高德地图开发者的官网地址：https://lbs.amap.com/api/java…
使用前需要注册账号和获取 key，阅读官网教程，有详细的注册流程；
https://lbs.amap.com/api/java…
下面直接上代码，我的代码可能不能正常运转，因为有向后台发请求，你可以针对自己的业务进行修改，代码绝对是自己跑过的项目上的，真是可靠！
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <!-- Tell the browser to be responsive to screen width -->
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
        <!-- Google Font -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
    </head>
    <body class="hold-transition skin-blue sidebar-mini">
        <div class="wrapper">
            
            <div id="content-wrapper">
                <!-- Main content -->
                <section class="content" style="background: #ecf0f5;">
                    <div id="mapContainer" class="map" tabindex="0"></div>
                </section>
            </div>
            
        </div>

        <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
        <!-- 页面地图【开始】-->
        <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.11&key=f6ee07ce6b36ef10876b7d1ed533dadc&plugin=AMap.MarkerClusterer">
        </script>
        <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
        <script type="text/javascript">
            // 设定高度适应屏幕高度【开始】var myWindow=document.getElementById("mapContainer");
            var screenHeight = window.screen.availHeight;
            var screenWidth = window.screen.availWidth;
            myWindow.style.width=screenWidth+"px";
            myWindow.style.height=screenHeight+"px";
            // 设定高度适应屏幕高度【结束】AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {var cluster, markers = [];
            var points= [];
            var map = new AMap.Map("mapContainer", {
                mapStyle: 'amap://styles/normal',
                resizeEnable: true,
                center: [105, 32],
                zoom: 5
            });
            getLngLat();// 从后台获取经纬度数据的方法, 数据格式请参考返回的 http://a.amap.com/jsapi_demos/static/china.js
                        // 高德官网聚合点的使用实例：https://lbs.amap.com/api/javascript-api/example/marker/markerclusterer
            function getLngLat(){
                $.ajax({
                    url:"map/getPositions",
                    type:"post",
                    data : {"roleId" : "1"},
                    async:false,
                    dataType: "json",
                    success: function(result){points = result.data;}
                });
            }
                
            $.each(points, function(i, item) { // 遍历每个点，我的业务要给每个点添加点击事件    
                var marker = new AMap.Marker({position: points[i].lngLat.split(','),
                    content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
                    offset: new AMap.Pixel(-15, -15)
                })
                var equiId = item.equipmentId; 
                var equiName = item.equipmentName;
                addClickHandler(equiId, equiName,marker); // 给标记点添加点击事件
                markers.push(marker);
            });
            
            var count = markers.length;
            var _renderCluserMarker = 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/2 + '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/2 + '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)
            };
            addCluster(2);
    
            function addCluster(tag) {if (cluster) {cluster.setMap(null);
                }
                if (tag == 2) {// 完全自定义
                    cluster = new AMap.MarkerClusterer(map, markers, {
                        gridSize: 80,
                        maxZoom:17,// 设置聚合点的层级，即从哪一层开始不再进行聚合操作，每个点都是分开的，我加这个是为了实现标记点的点击时间，聚合在一起的点没法获取单独点的信息
                        renderCluserMarker: _renderCluserMarker
                    });
                }else if (tag == 1) {// 自定义图标
                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)
                }];
                cluster = new AMap.MarkerClusterer(map, markers, {
                    styles: sts,
                    gridSize: 80
                });
            } else {// 默认样式
                cluster = new AMap.MarkerClusterer(map, markers, {gridSize: 80});
            }
        }
            
            function addClickHandler(equiId,equiName,marker){marker.on("click",function(e){openInfo(equiId,equiName,marker,e)}
                );
                }
            function openInfo(equiId,equiName,marker,e){
                var channel = "";
                $.ajax({
                    url : "dataAcquisition/realtime",
                    type : "post",
                    data : {"equipmentId" : equiId},
                    dataType : "json",
                    success : function(result) {
                        var data = result.data;
                        if(data==undefined){channel+="<h5 style='color: red;'> 未查找到通道监测信息！</h5>";}else{
                            var num =data.length;
                            // 超过 5 分钟提示
                            lTime=(new Date(data[0].receiveTime)).getTime();
                            cTime=(new Date()).getTime();
                            $("#last-time").text("最后监测时间："+data[0].receiveTime);
                            if((cTime-lTime)>(5*60*1000)){$("#last-time").css({"color":"red"}); }
                            else{$("#last-time").css({"color":"#21242e"});}
                            // 设定尺寸适应容器【开始】let count = Math.ceil(num/3);
                            // 设定尺寸适应容器【结束】for(let i=0; i<count; i++){
                                let startIndex = 3*i;
                                let endIndex = (3*i+3>num)?num:(3*i+3);
                                channel+="<tr>";
                                // 通道结果每三个循环一回，缘于界面展示效果较规整
                                for(let j=startIndex; j<endIndex; j++){let state=parseFloat(data[j].state);
                                    if(state==5){var resultMsg=(data[j].temperature==2999)?("系统调整中"):(data[j].temperature);
                                        channel+="<td class='green'style='padding: 10px;'><span class='span_left'>"+data[j].opticalFiberPosition+"：</span><span class='span_right'>"+resultMsg+"</span></td>"; 
                                    }
                                    else if(state==4){channel+="<td class='red'style=' padding: 10px;'><span class='span_left'>"+data[j].opticalFiberPosition+"：</span><span class='span_right'>- - - - -</span></td>"; }
                                    else if(state==3){channel+="<td class='red'style='padding: 10px;'><span class='span_left'>"+data[j].opticalFiberPosition+"：</span><span class='span_right'>- - -</span></td>"; }
                                    else{channel+="<td class='yellow'style='padding: 10px;'><span class='span_left'>"+data[j].opticalFiberPosition+"：</span><span class='span_right'>"+data[j].temperature+"</span></td>"; }
                                }
                                channel+="</tr>";
                            }
                        }
                        $("#chwin").html(channel);
                    }
                    
                });
                new SimpleInfoWindow({
                    infoTitle: '<strong>'+equiName+'实时温度 </strong>',
                    infoBody: '<p class="my-desc"><span id="last-time"></span><br/><table id="chwin"></table></p>',
                    // 基点指向 marker 的头部位置
                    offset: new AMap.Pixel(-45, -31)
                }).open(map, marker.getPosition());
            
                }
            
             }); 
            
    </script>
    <!-- 页面地图【结束】-->


</body>
</html>
小小菜鸟，如有不正确之处，请指正！
Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）
