Jetpack Compose中Google Maps Marker点击事件失效问题求助

问题描述 #

使用Google Maps Compose库实现Marker点击功能时无响应，代码如下：

@Composable
fun MapContent(city: City)  {
    val pos = LatLng(city.latitude, city.longitude)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(pos, 12f)
    }
    val mapState = rememberMarkerState(position = pos)
    
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState,
        uiSettings = MapUiSettings(zoomControlsEnabled = false)
    ) {
        Marker(
            state = mapState,
            onClick = {
                Timber.tag("GoogleMapClick").d("click!!!")
                false
            }
        )
    }
}

依赖版本：

implementation 'com.google.maps.android:maps-compose:2.5.3'
implementation 'com.google.android.gms:play-services-maps:18.1.0'

期望点击Marker后显示包含城市信息的BottomSheet，请问问题出在哪里？

解决方案 #

1. 修正Marker点击事件的返回值 #

你当前在onClick中返回false，这会将点击事件传递给GoogleMap本身，导致Marker的点击回调无法正常触发。需要将返回值改为true，表示消费该点击事件，不再向下传递：

Marker(
    state = mapState,
    onClick = {
        Timber.tag("GoogleMapClick").d("click!!!")
        true // 改为true，消费点击事件
    }
)

2. 升级依赖版本确保兼容性 #

当前使用的play-services-maps:18.1.0版本与maps-compose:2.5.3存在兼容性问题，建议将play-services-maps升级到18.2.0或更高版本，匹配Maps Compose的版本要求：

implementation 'com.google.maps.android:maps-compose:2.5.3'
implementation 'com.google.android.gms:play-services-maps:18.2.0'

3. 实现点击Marker显示BottomSheet #

添加状态变量控制BottomSheet的显示/隐藏，点击Marker时更新状态，结合ModalBottomSheetLayout实现需求：

@Composable
fun MapContent(city: City)  {
    val pos = LatLng(city.latitude, city.longitude)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(pos, 12f)
    }
    val mapState = rememberMarkerState(position = pos)
    val showBottomSheet = remember { mutableStateOf(false) } // 控制BottomSheet显示的状态

    ModalBottomSheetLayout(
        sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
        sheetContent = {
            // 这里放置城市信息的BottomSheet内容
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text(text = "城市：${city.name}", fontSize = 18.sp, fontWeight = FontWeight.Bold)
                Text(text = "纬度：${city.latitude}", fontSize = 14.sp)
                Text(text = "经度：${city.longitude}", fontSize = 14.sp)
                // 可添加更多信息或操作按钮
            }
        },
        sheetBackgroundColor = Color.White,
        sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
        content = {
            GoogleMap(
                modifier = Modifier.fillMaxSize(),
                cameraPositionState = cameraPositionState,
                uiSettings = MapUiSettings(zoomControlsEnabled = false)
            ) {
                Marker(
                    state = mapState,
                    onClick = {
                        showBottomSheet.value = true // 点击Marker显示BottomSheet
                        true
                    }
                )
            }
        }
    )
}

额外检查 #

• 确保没有其他布局（如悬浮按钮、遮罩层）覆盖在Marker上方，阻挡点击事件。
• 确认City类的latitude和longitude值正确，Marker确实显示在地图上的可点击位置。

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