Android Maps Compose：完全屏蔽诱饵Marker的onClick事件

问题解决：修复光晕Marker捕获点击事件的问题 #

你的核心问题是光晕Marker的层级高于主Marker，且未禁用它的点击交互，导致它会拦截主Marker的点击事件。按以下步骤修改代码即可解决：

1. 调整层级顺序：将主Marker的zIndex设为更高值（如1f），光晕Marker的zIndex设为更低值（如-1f），确保主Marker始终绘制在光晕上方。
2. 禁用光晕Marker的点击：给光晕Marker添加clickable = false参数，彻底阻止它接收任何点击事件。

修改后的代码：

@Composable
fun LocationPin(
    glowBitmap: BitmapDescriptor?,
    noGlowBitmap: BitmapDescriptor?,
    position: LatLng,
    isSelected: Boolean,
    onClick: (() -> Unit)? = null
) {
    val markerState = rememberMarkerState(position = position)
    val glowMarkerState = rememberMarkerState(position = position)
    val glowAlpha = remember { Animatable(0f) }

    LaunchedEffect(isSelected) {
        if (isSelected) {
            glowAlpha.animateTo(
                targetValue = 1f, animationSpec = tween(durationMillis = 2500)
            )
        } else glowAlpha.snapTo(0f)
    }

    // 主Marker：层级更高，处理点击
    Marker(
        state = markerState,
        icon = noGlowBitmap,
        alpha = 1f,
        zIndex = 1f,
        onClick = {
            onClick?.invoke()
            Log.d("LocationPin", "clicked no glow")
            true
        })

    if (isSelected) {
        // 光晕Marker：层级更低，禁用点击
        Marker(
            state = glowMarkerState,
            icon = glowBitmap,
            alpha = glowAlpha.value,
            zIndex = -1f,
            clickable = false,
            onClick = {
                Log.d("LocationPin", "clicked with glow")
                true
            }
        )
    }
}

修改后，光晕Marker会固定在主Marker后方，且不会触发任何点击事件，所有交互都会由主Marker处理。

替代方案：单Marker实现光晕效果（更可靠） #

如果双Marker方案仍存在层级或交互问题，可将光晕与主Marker合并为单一图标，从根源避免冲突：

方案1：自定义View生成带光晕的Marker图标

创建自定义View绘制主Marker和动态透明度的光晕，再将View转换为BitmapDescriptor作为Marker图标。此方案为单一Marker，无点击冲突，且会随地图缩放自动适配大小。

示例思路：

class GlowMarkerView(context: Context) : View(context) {
    var glowAlpha: Float = 0f
        set(value) {
            field = value
            invalidate()
        }
    
    private val mainMarkerBitmap = BitmapFactory.decodeResource(resources, R.drawable.main_marker)
    private val glowBitmap = BitmapFactory.decodeResource(resources, R.drawable.glow_marker)
    
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // 绘制光晕
        canvas.save()
        canvas.alpha = glowAlpha
        canvas.drawBitmap(glowBitmap, (width - glowBitmap.width)/2f, (height - glowBitmap.height)/2f, null)
        canvas.restore()
        // 绘制主Marker
        canvas.drawBitmap(mainMarkerBitmap, (width - mainMarkerBitmap.width)/2f, (height - mainMarkerBitmap.height)/2f, null)
    }
}

// Compose中使用
@Composable
fun LocationPin(
    position: LatLng,
    isSelected: Boolean,
    onClick: (() -> Unit)? = null
) {
    val markerState = rememberMarkerState(position = position)
    val glowAlpha = remember { Animatable(0f) }
    val context = LocalContext.current
    
    LaunchedEffect(isSelected) {
        if (isSelected) glowAlpha.animateTo(1f, tween(2500)) else glowAlpha.snapTo(0f)
    }
    
    val glowMarkerView = remember { GlowMarkerView(context) }
    LaunchedEffect(glowAlpha.value) {
        glowMarkerView.glowAlpha = glowAlpha.value
    }
    
    val markerIcon = remember(glowAlpha.value) {
        BitmapDescriptor.fromView(glowMarkerView)
    }
    
    Marker(
        state = markerState,
        icon = markerIcon,
        onClick = {
            onClick?.invoke()
            true
        }
    )
}

方案2：GroundOverlay实现大尺寸光晕

若光晕尺寸较大，使用GroundOverlay替代光晕Marker，它能灵活控制大小且默认不干扰Marker点击：

@Composable
fun LocationPin(
    glowBitmap: BitmapDescriptor?,
    noGlowBitmap: BitmapDescriptor?,
    position: LatLng,
    isSelected: Boolean,
    onClick: (() -> Unit)? = null
) {
    val markerState = rememberMarkerState(position = position)
    val glowAlpha = remember { Animatable(0f) }
    val mapCameraState = rememberCameraPositionState()
    
    // 根据缩放级别动态调整光晕大小（单位：米）
    val glowSize = remember(mapCameraState.position.zoom) {
        val zoom = mapCameraState.position.zoom
        50 * Math.pow(0.5, 19 - zoom).toFloat()
    }
    
    LaunchedEffect(isSelected) {
        if (isSelected) glowAlpha.animateTo(1f, tween(2500)) else glowAlpha.snapTo(0f)
    }
    
    // 主Marker
    Marker(
        state = markerState,
        icon = noGlowBitmap,
        onClick = {
            onClick?.invoke()
            true
        })
    
    // 光晕GroundOverlay
    if (isSelected && glowBitmap != null) {
        GroundOverlay(
            image = glowBitmap,
            position = position,
            width = glowSize,
            height = glowSize,
            alpha = glowAlpha.value,
            zIndex = -1f
        )
    }
}

此方案需根据相机缩放级别动态调整GroundOverlay大小，确保光晕与Marker缩放比例一致。

内容的提问来源于stack exchange，提问作者superpav