使用 jetpack compose 的 Mapbox 地图是黑色的

Question

我正在尝试将 Mapbox 与 Compose 结合使用，但地图显示不正确。我试试：

@Composable
fun MapView(
    modifier: Modifier = Modifier
) {
    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = { context ->
            var map = MapView(context).apply {
                layoutParams = ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT
                )
                getMapboxMap().apply {
                    cameraOptions {
                        zoom(19.0)
                    }
                }
            }
            map
        }
    )
}

但显示为空：

Answer 1

您首先必须使用

获取 mapbox 的实例

Mapbox.getInstance(context, public_api_key)

然后在地图视图中，您必须异步获取地图。

MapView(context).apply {
    getMapAsync { mapboxMap ->
        mapboxMap.setStyle(Style.MAPBOX_STREETS)
        val position = CameraPosition.Builder()
            .zoom(19.0)
            .build()
        mapboxMap.animateCamera(CameraUpdateFactory.newCameraPosition(position), 1)
    }
}

完整片段

 AndroidView(
        modifier = modifier,
        factory = { context ->
            Mapbox.getInstance(
                context,
                public_api_key
            )
            MapView(context).apply {
                getMapAsync { mapboxMap ->
                    mapboxMap.setStyle(Style.MAPBOX_STREETS)

                    val position = CameraPosition.Builder()
                        .zoom(19.0)
                        .build()

                    mapboxMap.animateCamera(CameraUpdateFactory.newCameraPosition(position), 1)
                }
            }
        }
    )

使用 jetpack compose 的 Mapbox 地图是黑色的

Mapbox map is black using jetpack compose

android

kotlin

mapbox

android-jetpack