项目需求
- 按照行政区域进行标注点聚合统计；
- 根据数据类型自动调整标签颜色分类；
- 专属邀请链接：https://lbs.qq.com?lbs_invite=6LPEFL6
开发实战
构建地图容器
<div id="container"></div>
创建富文本标签样式表
#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 < markerArr.length; i++) { var title = markerArr[i].title; var id = markerArr[i].id; var cat = markerArr[i].cat; var value = markerArr[i].value; var point = markerArr[i].point; addRichMaker(title, cat, id, value, point); } }
封装富文本标签
//富文本标签函数封装; function addRichMaker(title, cat, id, value, point) { var richHtml = '<div class="richborder bg' + cat + '" id="richborder' + id + '"><span class="rich_text">' + title + '</span><span class="rich_number">' + value + '个</span></div>'; var label = new qq.maps.Label({ position: new qq.maps.LatLng(point.split(",")[0], point.split(",")[1]), map: map, content: richHtml }); label.setStyle(cssC); }
lockdatav Done!
