如何在Jetpack Compose Map Compose库中自定义myLocationButton

Map Compose默认的定位按钮确实存在样式、位置固定的局限，你可以通过禁用默认按钮+自定义Compose组件的方式完全掌控按钮的样式、位置和行为，下面是具体实现步骤和代码示例：

1. 禁用默认定位按钮 #

首先在Map Compose配置中关闭默认按钮，避免布局冲突：

GoogleMap(
    modifier = Modifier.fillMaxSize(),
    cameraPositionState = cameraPositionState,
    uiSettings = MapUiSettings(
        myLocationButtonEnabled = false // 关闭默认按钮
    ),
    myLocationEnabled = true // 保持定位功能开启
) {
    // 地图内容
}

2. 自定义定位按钮实现 #

用Compose的Box布局将自定义按钮叠加在地图上，自由控制位置、图标和点击逻辑：

完整代码示例 #

@Composable
fun CustomMapWithLocationButton() {
    val cameraPositionState = rememberCameraPositionState()
    val context = LocalContext.current
    val locationPermissionState = rememberPermissionState(Manifest.permission.ACCESS_FINE_LOCATION)
    val coroutineScope = rememberCoroutineScope()
    val isLocationLoading = remember { mutableStateOf(false) }

    // 获取当前位置并移动相机的核心逻辑
    fun moveToCurrentLocation() {
        coroutineScope.launch {
            if (locationPermissionState.hasPermission) {
                isLocationLoading.value = true
                val fusedLocationClient = LocationServices.getFusedLocationProviderClient(context)
                val lastLocation = fusedLocationClient.lastLocation.await()

                lastLocation?.let { location ->
                    cameraPositionState.animateCamera(
                        update = CameraUpdateFactory.newLatLngZoom(
                            LatLng(location.latitude, location.longitude),
                            15f // 自定义缩放级别
                        ),
                        durationMs = 1000
                    )
                }
                isLocationLoading.value = false
            } else {
                locationPermissionState.launchPermissionRequest()
            }
        }
    }

    Box(modifier = Modifier.fillMaxSize()) {
        GoogleMap(
            modifier = Modifier.fillMaxSize(),
            cameraPositionState = cameraPositionState,
            uiSettings = MapUiSettings(myLocationButtonEnabled = false),
            myLocationEnabled = locationPermissionState.hasPermission
        )

        // 自定义定位按钮
        IconButton(
            onClick = ::moveToCurrentLocation,
            enabled = !isLocationLoading.value,
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .padding(16.dp)
                .size(48.dp)
                .background(Color.White, CircleShape)
        ) {
            if (isLocationLoading.value) {
                CircularProgressIndicator(
                    modifier = Modifier.size(24.dp),
                    strokeWidth = 2.dp
                )
            } else {
                Icon(
                    imageVector = Icons.Filled.MyLocation,
                    contentDescription = "定位到当前位置",
                    tint = Color.Black
                )
            }
        }
    }
}

3. 定制扩展说明 #

• 更改图标：替换Icons.Filled.MyLocation为自定义矢量图标（painterResource(id = R.drawable.custom_location_icon)）或位图
• 调整位置：修改Modifier.align()参数（比如Alignment.BottomStart）和padding()值调整按钮位置
• 样式定制：通过Modifier.background()、Modifier.shadow()添加背景色、阴影，或用Button组件替代IconButton实现复杂样式
• 行为扩展：在点击事件中添加额外逻辑，比如切换定位跟踪模式、弹出位置信息弹窗等

关于复用系统默认按钮逻辑 #

Map Compose没有直接暴露默认定位按钮的内部实现，但核心行为就是获取当前位置+移动相机，上面的代码已经实现了相同的核心功能，同时完全开放UI定制空间，无需依赖系统默认按钮。

内容的提问来源于stack exchange，提问作者Grzegorz Brzęczyszczykiewicz