高德地圖：（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的樣式實現，和高德聚合圖一樣的效果。如果有建議、疑問或者更好的方案，歡迎大家留言。