Jetpack Compose Google Maps ClusterItem位置偏移至底部求解决方案

使用Clustering组件时，ClusterItem内容会偏移至底部而非居中——比如示例中蓝色方块与Marker定位在同一坐标，但方块未处于标记中心，用图片作为ClusterItem时也会出现位置错误。

临时修复方案 #

由于Clustering默认以内容底部中心作为坐标锚点（和Marker默认行为一致），可以通过手动偏移布局来让内容中心与坐标点对齐：

方法1：使用offset modifier

直接给ClusterItem的容器向上偏移自身高度的一半：

GoogleMap(cameraPositionState = CameraPositionState(
    position = CameraPosition.fromLatLngZoom(
        defaultLocation, 18f
    )
)) {
    Marker(state = MarkerState(defaultLocation))
    Clustering(items = listOf(ClusterItemCustom())) {
        Box(
            modifier = Modifier
                .requiredHeight(100.dp)
                .requiredWidth(100.dp)
                .background(Color.Blue.copy(alpha = 0.5f))
                .offset(y = (-50).dp) // 向上偏移高度的一半，使中心对齐坐标点
        )
    }
}

方法2：使用layout modifier自定义布局

这种方式更灵活，适合动态尺寸的内容：

GoogleMap(cameraPositionState = CameraPositionState(
    position = CameraPosition.fromLatLngZoom(
        defaultLocation, 18f
    )
)) {
    Marker(state = MarkerState(defaultLocation))
    Clustering(items = listOf(ClusterItemCustom())) {
        Box(
            modifier = Modifier
                .requiredSize(100.dp)
                .background(Color.Blue.copy(alpha = 0.5f))
                .layout { measurable, constraints ->
                    val placeable = measurable.measure(constraints)
                    // 将内容向上偏移自身高度的一半
                    layout(placeable.width, placeable.height) {
                        placeable.place(0, -placeable.height / 2)
                    }
                }
        )
    }
}

原理说明 #

Clustering组件的坐标锚点默认设置为内容底部中心，和原生Marker的默认锚点逻辑一致。通过向上偏移内容高度的一半，就能让内容中心与地图坐标点重合，修正偏移问题。

内容的提问来源于stack exchange，提问作者J. Doe