如何在 jetpack compose 中使用自定义可组合函数作为地图的标记图标

Question

如何在 jetpack compose 中使用自定义可组合函数作为地图的标记图标。

这是我尝试在项目中用作标记图标的自定义可组合函数。

@Composable
fun CustomMarker() {
    Box(
        modifier = Modifier
            .height(40.dp)
            .width(85.dp)
    ) {
        Box(modifier = Modifier
            .height(40.dp)
            .width(40.dp)
            .rotate(45f)
            .clip(RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp, bottomStart = 20.dp))
            .border(
                2.dp,
                color = Color.White,
                shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp, bottomStart = 20.dp)
            )
            .background(
                brush = Brush.verticalGradient(
                    listOf(
                        Color(0xff11A5CF),
                        Color(0xff04CFBB)
                    )
                )
            ),
            contentAlignment = Alignment.Center
        )
    }
}

这是我的 googleMap 默认可组合项，我想在其中使用上述可组合项作为自定义标记图标。

val latLongList by remember {
        mutableStateOf(listOf(LatLng(23.091579064649835,72.53389410674572), LatLng(22.32911404585704, 70.79109091311693),
            LatLng(24.5791114644088, 72.69674610346556), LatLng(22.356990318569245, 73.18480521440506)
            , LatLng(21.155952265072994, 72.84413181245327)))
    }
    var index by remember {
        mutableIntStateOf(0)
    }
    val cameraState = rememberCameraPositionState{
        position = CameraPosition(latLongList[index], 15f, 0f,0f)
    }
    val context = LocalContext.current
    GoogleMap(modifier = Modifier.fillMaxSize(), onMapClick = {
        latLng ->
        Log.d("location", latLng.latitude.toString() + "and " + latLng.longitude.toString())
    }, cameraPositionState = cameraState){

        latLongList.forEachIndexed { index, latLng ->
            val markerState = rememberMarkerState(position = latLng)
            Marker(
                state = markerState,
                icon = //it accepts a bitmapDiscriptor?
            )
        }
    }

Answer 1

从 android-maps-compose v2.14.0 开始，您可以使用 MarkerComposables。

GoogleMap {
    latLongList.forEachIndexed { index, latLng ->
        val markerState = rememberMarkerState(position = latLng)
        MarkerComposable(
            state = markerState
        ) {
            CustomMarker()
        }
    }
}