Android Studio中如何创建带Firebase图片与动态通知角标的Google Map标记

嘿，这个需求我之前做项目的时候刚好碰到过，完美匹配你想要的那种右上角带数字角标的Marker效果（类似聊天APP未读消息提示的红色小圆点加数字）！下面给你一步步拆解实现：

一、加载Firebase存储的图片作为Marker基础图标 #

首先得把Firebase Storage里的图片转成Google Map Marker能识别的BitmapDescriptor，这里推荐用Glide来处理，它能自动缓存图片、避免OOM，比手动写下载逻辑靠谱多了：

代码示例（Kotlin，Java逻辑一致） #

// 1. 获取Firebase Storage中目标图标的引用
val storageRef = FirebaseStorage.getInstance().getReference().child("markers/your_custom_icon.png")

// 2. 用Glide加载图片并转成Bitmap
Glide.with(requireContext())
    .asBitmap()
    .load(storageRef)
    .into(object : CustomTarget<Bitmap>() {
        override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
            // 拿到基础Bitmap后，马上给它加上数字角标（初始计数比如设为0）
            val markedBitmap = addBadgeToBitmap(resource, unreadMessageCount)
            // 创建并添加Marker到地图上
            val marker = googleMap.addMarker(
                MarkerOptions()
                    .position(LatLng(23.1234, 113.4567)) // 替换成你的目标坐标
                    .icon(BitmapDescriptorFactory.fromBitmap(markedBitmap))
            )
            // 把当前计数存在Marker的tag里，方便后续更新
            marker?.tag = unreadMessageCount
        }

        override fun onLoadCleared(placeholder: Drawable?) {}
    })

二、给Bitmap添加动态可更新的数字角标 #

这部分是核心，我们写一个工具方法，把数字绘制到Bitmap的右上角，支持动态修改计数：

角标绘制工具方法 #

/**
 * 给基础Bitmap添加右上角数字角标
 * @param originalBitmap 从Firebase加载的基础Marker图标
 * @param count 未读消息计数，0则不显示角标
 */
fun addBadgeToBitmap(originalBitmap: Bitmap, count: Int): Bitmap {
    // 如果计数为0，直接返回原图标，不画角标
    if (count <= 0) return originalBitmap

    // 创建可编辑的Bitmap副本
    val resultBitmap = originalBitmap.copy(Bitmap.Config.ARGB_8888, true)
    val canvas = Canvas(resultBitmap)
    val paint = Paint().apply {
        isAntiAlias = true // 抗锯齿，让角标更平滑
    }

    // 1. 绘制红色圆形背景
    paint.color = Color.RED
    // 根据数字长度调整角标大小：三位数显示99+，角标更大
    val badgeRadius = if (count > 99) 20f else 16f
    val badgeCenterX = resultBitmap.width - badgeRadius
    val badgeCenterY = badgeRadius
    canvas.drawCircle(badgeCenterX, badgeCenterY, badgeRadius, paint)

    // 2. 绘制白色数字文本
    paint.color = Color.WHITE
    paint.textSize = if (count > 99) 12f else 14f
    paint.textAlign = Paint.Align.CENTER
    // 计算文字垂直居中的Y坐标（Paint的文本居中公式）
    val textY = badgeCenterY - (paint.descent() + paint.ascent()) / 2
    // 超过99显示99+，避免数字溢出
    val displayText = if (count > 99) "99+" else count.toString()
    canvas.drawText(displayText, badgeCenterX, textY, paint)

    return resultBitmap
}

三、动态更新角标数字 #

当收到新消息需要更新计数时，只需要取出之前创建的Marker，重新生成带新计数的Bitmap，然后更新Marker图标即可：

// 假设你已经保存了目标Marker的引用
fun updateMarkerBadge(marker: Marker, newCount: Int) {
    // 先获取基础Bitmap（可以提前缓存，避免重复从Firebase下载）
    val baseBitmap = getCachedBaseBitmap() // 这里需要你自己实现缓存逻辑，比如存在全局变量里
    val newMarkedBitmap = addBadgeToBitmap(baseBitmap, newCount)
    // 更新Marker图标
    marker.setIcon(BitmapDescriptorFactory.fromBitmap(newMarkedBitmap))
    // 更新Marker的tag为新计数
    marker.tag = newCount
}

四、关键注意事项 #

• 缓存优化：把从Firebase加载的基础Bitmap缓存起来，避免每次更新角标都重新下载，提升性能
• 性能考量：如果地图上有大量Marker，不要频繁调用addBadgeToBitmap，可以复用Canvas或者批量更新
• 边界处理：记得处理count=0的情况（隐藏角标），以及count>99的情况（显示99+）
• 权限检查：确保已经在Manifest中申请了INTERNET（访问Firebase）和ACCESS_FINE_LOCATION/ACCESS_COARSE_LOCATION（地图定位）权限

内容的提问来源于stack exchange，提问作者Wong Jin Ho