在利用百度地图进行添加覆盖物时，想要做到显示出，不同用户的打卡点，如上图所示。

因为要显示用户数量不定，所以想用marker类时，肯定不好，因为marker类添加的是图像标注，必须要足够的图片（当然，如果确保每个用户都有头像，可以采用这种）。当不确定用户是否有头像时，就要采用另一种了。

首先，可以根据用户名，来生成不同的颜色

首先通过解析名字匹配hash值来生成颜色（这里部分方法用的extjs的，如果是js自己替换）

//计算名字唯一颜色
function getUniqueColor(name) {
        if (Ext.isEmpty(name)) return 'transparent';

        var hex = (Math.abs(hashCode(name)) % 0xcccccc).toString(16),
            color = `#${Ext.String.leftPad(hex, 6, '0')}`;

        return color;
}

function hashCode(s) {
        if (!s) return null;
        let hash = 0,
            i, chr, len;
        if (!s.length) return hash;
        for (i = 0, len = s.length; i < len; i++) {
            chr = s.charCodeAt(i);
            hash = (hash << 5) - hash + chr;
            hash |= 0; // Convert to 32bit integer
        }

        return hash;
  }

通过label来绘制各个点

这里面可以采用循环 创造出这些点

var map = new BMap.Map(地图容器);//详细教程看百度地图api 
var point = new BMap.Point(用户打卡点的经度, 用户打卡点的纬度);
 var label = new BMap.Label(用户名第一个字（自定义）, {
     offset: new BMap.Size(-10, -10),
     position: point
 });
 label.setStyle({
     color: '#fff',
     border: '3px solid #F44336',
     'border-radius': '100%',
     cursor: 'pointer',
     width: '25px',
     height: '25px',
     'text-align': 'center',
     'line-height': '18px',
     background: getUniqueColor(用户名) //根据名字得到颜色
 }); 
 map.addOverlay(label);//将标记添加到地图上

为label添加css样式

这里主要是用css绘制出 定位图标 下面的 “尖”

 .BMapLabel: after {
     content: '';
     height: 0 px;
     width: 0 px;
     display: block;
     position: absolute;
     bottom: -11 px;
     left: 5 px;
     border: 10 px transparent solid;
     border - top - color: #f44336;
     border - width: 10 px 5 px 0 px 5 px;
 }

当然，也可以通过自定义覆盖物的方法，但是那个写的东西太繁琐，就采用这种label式添加