如何在协程中加载Google Maps Marker并解决Composable调用报错？

错误原因 #

你直接在Dispatchers.IO协程里调用Marker组件是错误的——Marker是@Composable函数，只能在Compose的UI上下文（比如其他@Composable函数、LaunchedEffect等）中调用，后台协程不能直接创建Composable组件。

正确实现思路 #

后台协程只负责数据的加载/预处理，把处理好的位置数据放到可观察的状态容器里，然后在Composable上下文里根据状态渲染Marker，这样既实现了后台加载不阻塞地图启动，又符合Compose的规则。

代码示例 #

@Composable
fun MapScreen(locations: List<Place>) {
    // 用mutableStateListOf存储要渲染的位置数据，数据变化会自动触发UI重组
    val markerLocations = remember { mutableStateListOf<Place>() }
    val scope = rememberCoroutineScope()

    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = rememberCameraPositionState {
            // 初始化地图相机位置，可根据需求调整
            position = CameraPosition.fromLatLngZoom(LatLng(39.9042, 116.4074), 10f)
        }
    ) {
        // 在Compose UI上下文里遍历状态数据，渲染Marker
        markerLocations.forEach { place ->
            Marker(
                state = MarkerState(LatLng(place.lat, place.lng)),
                title = place.name,
                snippet = place.snippet
            )
        }
    }

    // 用LaunchedEffect启动协程，在后台处理数据
    LaunchedEffect(Unit) {
        scope.launch(Dispatchers.IO) {
            // 这里替换成你的实际数据加载/处理逻辑（比如从网络、本地数据库取数）
            val processedLocations = locations.map { it }
            
            // 更新UI状态，必须切换回主线程执行
            withContext(Dispatchers.Main) {
                markerLocations.clear()
                markerLocations.addAll(processedLocations)
            }
        }
    }
}

// 假设的Place数据结构，可根据实际业务调整
data class Place(
    val lat: Double,
    val lng: Double,
    val name: String,
    val snippet: String
)

关键说明 #

• mutableStateListOf是Compose的可观察集合，数据变更会自动触发UI重组，新增的Marker会被自动渲染
• LaunchedEffect是Compose提供的生命周期安全的协程入口，确保协程随组件生命周期正确启停
• 后台协程仅处理数据逻辑，不涉及UI组件创建，避免了跨上下文调用Composable的错误
• 地图启动时不会被数据加载阻塞，Marker会在数据准备完成后自动渲染，提升启动体验

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