在 Jetpack Compose 中的 GoogleMap 底部显示 ElevatedCards 的 LazyRow

Question

我正在尝试在 Jetpack Compose 中实现 GoogleMap 可组合项。我有一张地图，其中有一个按钮可以将相机重置到用户位置，并且有一些 LazyRow 中的 ElevatedCard。

我想要实现的是将这两个（按钮+提升卡）显示为GoogleMap中的内容，以便GoogleMap的缩放按钮自动重置到屏幕上的正确位置。

代码如下：

@Composable
fun GoogleMapView(
    modifier: Modifier = Modifier,
    context: Context,
    location: LatLng,
    bounds: LatLngBounds,
    listOne: List<Object?>,
    listTwo: List<Object?>,
    onMapLoaded: () -> Unit = {},
    content: @Composable () -> Unit = {}
) {
[...]

Box(
        modifier = Modifier.fillMaxSize()
    ) {
        Box(Modifier.fillMaxSize()) {
            LaunchedEffect(key1 = true) {
                cameraPositionState.move(
                    update = CameraUpdateFactory.newLatLngBounds(bounds, 100)
                )
                cameraPositionState.move(
                    update = CameraUpdateFactory.zoomOut()
                )
            }
            GoogleMap(
                modifier = modifier,
                cameraPositionState = cameraPositionState,
                properties = mapProperties,
                uiSettings = uiSettings,
                onMapLoaded = onMapLoaded
            ) {
                /** Add custom marker that displays user location on the Map */
                MarkerComposable(
                    state = locationState
                ) {
                    LocationMarker()
                }

                val markerClick: (Marker) -> Boolean = {
                    Log.d(TAG, "${it.title} was clicked")
                    cameraPositionState.projection?.let { projection ->
                        Log.d(TAG, "The current projection is: $projection")
                    }
                    false
                }

                markers.forEach { marker ->
                    AdvancedMarker(
                        state = marker,
                        onClick = markerClick,
                        collisionBehavior = 1
                    )
                }

                content()
            }
        }
    }

    /** Add go home button */
    Column(
        modifier = Modifier
            .padding(bottom = 100.dp, end = 5.dp)
            .fillMaxSize(),
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.End
    ) {
        Button(
            onClick = {
                cameraPositionState.move(
                    update = CameraUpdateFactory.newLatLngBounds(bounds, 100)
                )
                cameraPositionState.move(
                    update = CameraUpdateFactory.zoomOut()
                )
                cameraPositionState.move(
                    update = CameraUpdateFactory.zoomOut()
                )
                cameraPositionState.move(
                    update = CameraUpdateFactory.zoomOut()
                )
                cameraPositionState.move(
                    update = CameraUpdateFactory.zoomOut()
                )
            }
        ) {
            Box(
                modifier = Modifier
                    .rotate(65f)
            ) {
                Icon(
                    Icons.Rounded.PlayArrow,
                    contentDescription = null
                )
            }
        }
    }

    /** Elevated cards */
    ElevatedCards(
        objects = objects,
        onObjectClick = { }
    )

其中

ElevatedCards

可组合项就是：

@Composable
fun ElevatedCards(
    modifier: Modifier = Modifier,
    objects: List<Object?>,
    onObjectClick: () -> Unit
) {
    LazyRow(
        modifier = modifier.fillMaxWidth(),
        contentPadding = PaddingValues(20.dp)
    ) {
        items(objects) { object ->
            if (object != null) {
                MapsElevatedCard(
                    object = object,
                    onObjectClick = onObjectClick
                )
            }
        }
    }
}

和

MapsElevatedCard

呈现

ElevatedCard

可组合项。

---

问题

如何将按钮+提升卡作为

content

带入GoogleMaps？现在，我覆盖在 GoogleMap 之上，并使用

padding

在包含可组合项的

Box

es 中移动，但正如您可以想象的那样，这不可扩展，也不安全，因为不同的设备可以具有不同的屏幕尺寸。

我想要的是将按钮+提升卡合并为GoogleMap控件的一部分，并让GoogleMap根据需要调整排列。

我附上了现在的屏幕截图

我希望提升的卡片位于屏幕底部，并有一些有保证的填充。

---

我尝试过的事情

我尝试利用

content

并直接提供对 GoogleMap 主体内可组合项的调用。但是，我在尝试时收到此错误：

java.lang.ClassCastException: androidx.compose.ui.node.LayoutNode cannot be cast to com.google.maps.android.compose.MapNode

Answer 1

目前，非 GoogleMapComposable 无法添加为内容。必须实现 MapInterface。

另请参阅：https://github.com/googlemaps/android-maps-compose/issues/344以及其中引用的问题。