高德地图：（marker+css）实现聚合图效果

需求：地图上显示某区域人口分布情况，并在圆圈上显示每个地点某类的人口总数（效果同：聚合图）。

效果图：

实现步骤

1.引入文件

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=高德申请的key值&plugin=AMap.Geocoder"></script>

2.创建一张地图

//初始化地图对象，加载地图
var map = new AMap.Map("container", {
    center: [114.879026,25.768318],
    resizeEnable: true,
});


//构建自定义信息窗体
var infoWindow = new AMap.InfoWindow({
    anchor: 'middle-left',
    // content: '这是信息窗体！这是信息窗体！',
});

3.和后端交互

function pregnantPeopleInfo() {
    map.remove(single);
    $.ajax({
            type: 'get',
            dataType: 'text',
            url:  '/pregnant/pregnant/queryPregnantCount',  //后端接口地址
            p: [],
            cache: false,
            async: true,
            success: function (p) {
                var p = eval('(' + p + ')');
                for (var i = 0; i < p.rows.length; i++) {

                    var div = document.createElement('div');
                    var htmlData='<span style="  opacity: 0.7;border-radius: 80%;    height: 30px;    width: 30px;    display: inline-block;    background: #238ff9;    vertical-align: top;">\n' +
                        ' <span style="display: block;    color: #FFFFFF;    height: 30px;    line-height: 30px;    text-align: center">'+p.rows[i].sqCommunitymanage.count+'人</span>\n' +
                        ' </span>';
                    div.innerHTML=htmlData;
                    var point=[p.rows[i].sqCommunitymanage.longitude,p.rows[i].sqCommunitymanage.latitude];
                    var marker = new AMap.Marker({
                        position: point,
                        map: map,
                        title: p.rows[i].sqCommunitymanage.communityname,
                        visible: true,
                        content: div   //将marker上的内容，以html的形式显示
                    });
                    //显示marker
                    single.push(marker);
                    marker.communityname = p.rows[i].sqCommunitymanage.communityname;
                    marker.count = p.rows[i].sqCommunitymanage.count;


                    //点击marker显示信息框
                    marker.on('click', function(p){
                        // 设置信息框内容
                        infoWindow.setContent("<strong><span>"+p.target.communityname+"</span></strong><ul class='main'><li> 社区名称：<span style='color:blue'>"+p.target.communityname+"</span></li>"
                            + "<li>怀孕总人数: <span style='color:blue'>"+p.target.count+"  </span></li></ul>");


                        //将marker放到指定坐标
                        infoWindow.open(map, p.lnglat);
                    });
                }



            }
        });
}

总结：开始用高德聚合图做的，但是没用实现在圆圈上显示人口数量。最终用创建marker+css的样式实现，和高德聚合图一样的效果。如果有建议、疑问或者更好的方案，欢迎大家留言。