百度地图：默认水滴图标上显示文字

.amap-ui-district-cluster-marker {
   color:#555;
   background-color:#fffeef;
   font-size:12px;
   white-space:nowrap;
   position:absolute
}
.amap-ui-district-cluster-marker {
   border:1px solid #8e8e8e;
   width:auto;
   height:22px;
   border-radius:5px 5px 5px 0;
   left:0;
   top:0
}
.amap-ui-district-cluster-marker:after,.amap-ui-district-cluster-marker:before {
   content:'';
   display:block;
   position:absolute;
   width:0;
   height:0;
   border:solid rgba(0,0,0,0);
   border-width:6px;
   left:13px
}
.amap-ui-district-cluster-marker:after {
   bottom:-12px;
   border-top-color:#fffeef
}
.amap-ui-district-cluster-marker:before {
   bottom:-13px;
   border-top-color:#8e8e8e
}
.amap-ui-district-cluster-marker span {
   vertical-align:middle;
   padding:3px 5px;
   display:inline-block;
   height:16px;
   line-height:16px
}
.amap-ui-district-cluster-marker-title {
   border-radius:5px 0 0 0
}
.amap-ui-district-cluster-marker-body {
   background-color:#dc3912;
   color:#fff;
   border-radius:0 5px 5px 0
}
.amap-ui-district-cluster-marker.level_country .amap-ui-district-cluster-marker-body {
   background-color:#36c
}
.amap-ui-district-cluster-marker.level_city .amap-ui-district-cluster-marker-body {
   background-color:#909
}
.amap-ui-district-cluster-marker.level_district .amap-ui-district-cluster-marker-body {
   background-color:#d47
}

.BMapLabel{border:1px #fff solid; max-width:none;}
</style>

/*地图覆盖物

Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。

Marker：标注表示地图上的点，可自定义标注的图标。

Label：表示地图上的文本标注，您可以自定义标注的文本内容。

Polyline：表示地图上的折线。

Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。

Circle: 表示地图上的圆。

InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开

map.addOverlay方法向地图添加覆盖物

map.removeOverlay方法移除覆盖物，注意此方法不适用于InfoWindow

标注

Marker的构造函数的参数为Point和MarkerOptions（可选）。

注意：当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon的offset属性修改标定位置*/

var clustereData = [
{ "name": "金东区", "code": "410100000", "longitude": "119.770587", "latitude": "29.141759", "count": "445" },
{ "name": "婺城区", "code": "410200000", "longitude": "119.518803", "latitude": "28.964437", "count": "377" },
{ "name": "东阳市", "code": "410300000", "longitude": "120.388047", "latitude": "29.195248", "count": "370" },
{ "name": "武义县", "code": "410300000", "longitude": "119.660031", "latitude": "28.691878", "count": "370" },
{ "name": "义乌市", "code": "410300000", "longitude": "120.086181", "latitude": "29.321983", "count": "370" },
{ "name": "兰溪市", "code": "410300000", "longitude": "119.467752", "latitude": "29.217575", "count": "370" },
{ "name": "磐安县", "code": "410300000", "longitude": "120.62328", "latitude": "28.986318", "count": "370" },
{ "name": "永康市", "code": "410400000", "longitude": "120.053402", "latitude": "28.897241", "count": "300" }
];

function addWordMark(clustereData) {

$.each(clustereData, function(index, data) {

var point = new BMap.Point(data.longitude, data.latitude);
var marker = new BMap.Marker(point);
var tpl = '<div class="amap-ui-district-cluster-marker level_district"><span class="amap-ui-district-cluster-marker-title">' + data.name + '</span><span class="amap-ui-district-cluster-marker-body">' + data.count + '</span></div>';
var myLabel = new BMap.Label(tpl,
{
position: point, //label 在此处添加点位位置信息
offset: new BMap.Size(-13, -29)
});
myLabel.setStyle({
border: "0", //边
verticalAlign: "center",
cursor: "pointer"
});

marker.setLabel(myLabel);
map.addOverlay(marker);
})

}

百度地图：默认水滴图标上显示文字

相关推荐