Compose Maps：如何让标记信息窗口中的按钮可点击？

问题原因 #

MarkerInfoWindowContent的内部实现是将Compose布局渲染成静态Bitmap后展示，并非真正的可交互Compose组件。所以你添加的Button只是静态图片的一部分，无法响应点击事件，也不会有按压动画。

解决方案 #

推荐两种可行的处理方式，根据你的需求选择：

方式一：用自定义弹窗替代原生InfoWindow（推荐）

通过监听Marker的点击事件，弹出一个Compose原生的Dialog或Popup，里面放置带按钮的可交互布局。这种方式完全支持Compose组件的交互逻辑和动画效果。

示例代码：

GoogleMap(
    modifier = Modifier.fillMaxSize(),
    cameraPositionState = cameraPositionState
) {
    val bitmapDescriptor: BitmapDescriptor by remember { 
        mutableStateOf(BitmapDescriptorFactory.fromResource(R.drawable.place)) 
    }
    // 记录当前选中的公交站，控制弹窗显示
    val selectedBusStop by remember { mutableStateOf<BusStop?>(null) }

    for (busStop in uiState.data) {
        Marker(
            state = rememberMarkerState(position = LatLng(busStop.lat, busStop.lon)),
            icon = bitmapDescriptor,
            draggable = true,
            onClick = {
                selectedBusStop = busStop
                true // 返回true表示消费点击事件，阻止原生InfoWindow弹出
            }
        )
    }

    // 自定义可交互弹窗
    selectedBusStop?.let { busStop ->
        Dialog(onDismissRequest = { selectedBusStop = null }) {
            Column(
                modifier = Modifier
                    .wrapContentSize()
                    .background(Color.White)
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = busStop.id.toString(), color = Color.Red)
                Text(
                    text = busStop.name, 
                    color = Color.Red, 
                    modifier = Modifier.padding(vertical = 8.dp)
                )
                Button(
                    onClick = {
                        vm.dosomething()
                        selectedBusStop = null // 点击后关闭弹窗
                    }
                ) {
                    Text("Button")
                }
            }
        }
    }
}

方式二：通过InfoWindow点击事件模拟按钮交互

如果需要保留原生InfoWindow的样式，可以将数据绑定到Marker的tag上，通过GoogleMap的onInfoWindowClick回调统一处理点击逻辑。但这种方式无法实现按钮的按压动画，只能触发点击事件。

示例代码：

GoogleMap(
    modifier = Modifier.fillMaxSize(),
    cameraPositionState = cameraPositionState,
    onInfoWindowClick = { marker ->
        // 从tag中获取对应的公交站数据
        val busStop = marker.tag as? BusStop
        busStop?.let {
            vm.dosomething()
        }
    }
) {
    val bitmapDescriptor: BitmapDescriptor by remember { 
        mutableStateOf(BitmapDescriptorFactory.fromResource(R.drawable.place)) 
    }

    for (busStop in uiState.data) {
        MarkerInfoWindowContent(
            state = rememberMarkerState(position = LatLng(busStop.lat, busStop.lon)),
            icon = bitmapDescriptor,
            draggable = true,
            tag = busStop // 将公交站数据绑定到marker的tag
        ) {
            Column(
                modifier = Modifier.wrapContentSize().padding(8.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = busStop.id.toString(), color = Color.Red)
                Text(text = busStop.name, color = Color.Red)
                // 这里的按钮仅作静态展示，点击逻辑由onInfoWindowClick处理
                Text(
                    "Button",
                    modifier = Modifier
                        .padding(top = 8.dp)
                        .background(Color.Blue)
                        .padding(horizontal = 16.dp, vertical = 4.dp)
                        .clip(RoundedCornerShape(4.dp))
                        .color(Color.White)
                )
            }
        }
    }
}

总结 #

• 优先选择方式一，能获得完整的Compose组件交互体验；
• 若需贴近原生InfoWindow样式，再考虑方式二，但要接受无按压动画的限制。

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