腾讯位置服务富文本标签实现行政区域标注点聚合的解决方案

项目需求

1. 按照行政区域进行标注点聚合统计；
2. 根据数据类型自动调整标签颜色分类；
3. 专属邀请链接：https://lbs.qq.com?lbs_invite=6LPEFL6

开发实战 构建地图容器

创建富文本标签样式表

   #container {
            width: 100%;
            height: 90%;
        }

        .richborder {
            width: 110px;
            height: 30px;
            border-radius: 6px;
            padding: 3px;
        }

        .bg1 {
            background-color: #FF5722;
        }

        .bg2 {
            background-color: #01AAED;
        }

        .bg3 {
            background-color: #009688;
        }

        .bg4 {
            background-color: #5FB878;
        }

        .rich_text {
            background-color: #FFF;
            border-radius: 6px 0 0 6px;
            width: 60%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            display: inline-block;

        }

        .rich_number {
            width: 40%;
            text-align: center;
            display: inline-block;
        }

初始化地图

init = function () {
            var center = new qq.maps.LatLng(32.694866, 116.455078);
            var map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 5
            });
            }

数据格式

//JSON数据接口;
            var markerArr = [
                {title: "浙江省", point: "29.152161,119.838867", id: "1", value: "14", cat: "1"},
                {title: "江西省", point: "27.955591,115.312500", id: "2", value: "16", cat: "2"},
                {title: "湖北省", point: "31.428663,112.060547", id: "3", value: "19", cat: "3"},
                {title: "河南省", point: "33.797409,112.983398", id: "4", value: "12", cat: "4"},
                {title: "江苏省", point: "33.578015,119.707031", id: "5", value: "12", cat: "1"},
                {title: "山东省", point: "36.562600,118.740234", id: "5", value: "12", cat: "2"},
                {title: "河北省", point: "38.065392,115.224609", id: "5", value: "12", cat: "3"},
                {title: "山西省", point: "36.066862,111.269531", id: "5", value: "12", cat: "4"},
                {title: "四川省", point: "31.128199,102.875977", id: "5", value: "12", cat: "4"},
                {title: "甘肃省", point: "35.889050,103.842773", id: "5", value: "12", cat: "4"}
            ];

强制文本标签样式

         // 标签CSS样式
            var cssC = {color: "#000", fontSize: "16px", fontWeight: "bold", border: 0, background: 'transparent'};
                   //调用富文本标签;
            getRichMaker(markerArr);

            //循环数据接口;
            function getRichMaker(markerArr) {
                for (var i = 0; i ' + title + '' + value + '个