三步搞定打卡地图

29号同学

于 2019-04-25 19:22:15 发布

阅读量7.1k

点赞数 2

分类专栏：前端文章标签：百度地图用户打卡点绘制足迹足迹打卡地图

本文链接：https://blog.youkuaiyun.com/ZYD45/article/details/89522804

版权

本文介绍如何在百度地图上动态展示不同用户的打卡点，通过用户名生成不同颜色，并使用Label绘制点，配合CSS实现定位图标及尖角效果，简化了自定义覆盖物的繁琐过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

因为要显示用户数量不定，所以想用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 =