如何在Jetpack Compose的Google Maps中实现多标记增删？

一、重构ViewModel，实现可观察的位置状态管理 #

首先将ViewModel中的位置列表改为可观察的状态容器，确保增删操作后UI能自动更新，使用StateFlow是Jetpack推荐的状态管理方案：

@HiltViewModel
class LocationsViewModel @Inject constructor(): ViewModel() {

    data class AllPositions(
        val name: String,
        val lat: Double,
        val lng: Double
    )

    // 私有可变StateFlow，用于内部修改数据
    private val _positions = MutableStateFlow(initialPositions())
    // 公开不可变的StateFlow，供UI收集状态
    val positions = _positions.asStateFlow()

    // 初始化默认位置列表
    private fun initialPositions() = listOf(
        AllPositions("Stockholm",59.3252671500249, 18.06892284219277),
        AllPositions("Berlin",52.215711901711245, 13.437903189993865),
        AllPositions("Warszawa",52.215711901711245, 20.996237421187725),
        AllPositions("Paris",48.84465430007765, 2.270300780605712)
    )

    // 添加标记方法
    fun addPosition(position: AllPositions) {
        _positions.value = _positions.value + position
    }

    // 移除标记方法
    fun removePosition(position: AllPositions) {
        _positions.value = _positions.value.filterNot { it == position }
    }
}

二、修正Composable代码，实现多标记渲染与交互 #

修复原有Composable中的错误，完成标记渲染、增删交互逻辑：

@ExperimentalPermissionsApi
@Composable
fun RequestPermission(
    permission: String,
    rationaleMessage: String = "要使用应用功能，请授予权限。",
    viewModel: LocationsViewModel = hiltViewModel()
) {
    val permissionState = rememberPermissionState(permission)
    // 收集ViewModel中的位置状态，自动响应数据变化
    val positions by viewModel.positions.collectAsStateWithLifecycle()
    
    // 初始化相机位置：优先取第一个位置，无数据则用默认坐标兜底
    val cameraPositionState: CameraPositionState = rememberCameraPositionState {
        val defaultLatLng = positions.firstOrNull()?.let { LatLng(it.lat, it.lng) } 
            ?: LatLng(51.5074, -0.1278) // 默认伦敦坐标
        position = CameraPosition.fromLatLngZoom(defaultLatLng, 3f) // 缩小级别显示更多区域
    }

    // 地图属性与UI设置
    val mapProperties = MapProperties(isMyLocationEnabled = permissionState.hasPermission)
    val mapUiSettings = MapUiSettings(myLocationButtonEnabled = true)

    HandleRequest(
        permissionState = permissionState,
        deniedContent = { shouldShowRationale ->
            PermissionDeniedContent(
                rationaleMessage = rationaleMessage,
                shouldShowRationale = shouldShowRationale
            ) { permissionState.launchPermissionRequest() }
        },
        content = {
            Column(modifier = Modifier.fillMaxSize()) {
                // 增删操作按钮栏
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    horizontalArrangement = Arrangement.SpaceAround
                ) {
                    Button(onClick = {
                        // 添加测试位置（马德里）
                        viewModel.addPosition(
                            LocationsViewModel.AllPositions("Madrid", 40.4168, -3.7038)
                        )
                    }) {
                        Text("添加标记")
                    }

                    Button(onClick = {
                        // 移除最后一个标记，可根据需求修改逻辑
                        positions.lastOrNull()?.let { viewModel.removePosition(it) }
                    }) {
                        Text("移除最后一个标记")
                    }
                }

                GoogleMap(
                    modifier = Modifier.weight(1f),
                    cameraPositionState = cameraPositionState,
                    properties = mapProperties,
                    uiSettings = mapUiSettings
                ) {
                    // 遍历位置列表生成标记
                    positions.forEach { position ->
                        Marker(
                            state = MarkerState(position = LatLng(position.lat, position.lng)),
                            title = position.name,
                            snippet = "${position.lat}, ${position.lng}",
                            // 可选：点击标记直接移除
                            onClick = {
                                viewModel.removePosition(position)
                                true // 消费点击事件，避免触发默认行为
                            }
                        )
                    }
                }
            }
        }
    )
}

三、关键实现说明 #

• 状态管理：通过StateFlow+collectAsStateWithLifecycle实现数据与UI的双向绑定，增删操作后自动刷新标记列表
• 相机位置修复：替换了原有代码中错误的坐标转换逻辑，使用合法的默认坐标兜底，避免崩溃
• 标记渲染：遍历positions列表为每个位置创建Marker，MarkerState传入对应经纬度，标题和详情直接复用位置数据
• 增删交互：通过按钮触发ViewModel的addPosition/removePosition方法，也支持点击标记直接移除

四、注意事项 #

• 确保项目已添加Google Maps Compose、Hilt、Coroutines等必要依赖
• 权限申请需使用ACCESS_FINE_LOCATION或ACCESS_COARSE_LOCATION，并在Manifest中声明
• 如果需要持久化标记，可在ViewModel中添加Room等本地存储逻辑

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