Jetpack Compose地图中如何调整我的位置按钮的位置与图标

实现方案 #

谷歌地图默认提供的MyLocation按钮不支持直接修改位置和自定义图标，最优解是关闭默认按钮，自行用Compose组件叠加实现自定义按钮，可完全自定义样式、位置和交互逻辑。

步骤1：修改原有地图配置，关闭默认按钮

将你代码中uiSettings.isMyLocationButtonEnabled的值改为false，隐藏系统自带的定位按钮。

步骤2：用Box容器包裹地图与自定义按钮

使用Box作为外层容器，把地图AndroidView和自定义按钮放在同一个布局内，通过align属性控制按钮固定在右下角位置，完整示例代码如下：

Box(modifier = Modifier.fillMaxSize()) {
    // 原有地图组件
    AndroidView(
        factory = { mapView },
        modifier = Modifier.fillMaxSize()
    ) {
        mapView.getMapAsync { map ->
            map.apply {
                if (permissionsState){
                    isMyLocationEnabled = true
                }
                // 关闭默认定位按钮
                uiSettings.isMyLocationButtonEnabled = false
                // 以下保留你原有逻辑不变
                navigatorViewModel.apply {
                    scope.launch {
                        lastSelectedLocation.collect {
                            val position = LatLng(
                                it.lat,
                                it.lng
                            )
                            moveCamera(
                                CameraUpdateFactory.newLatLngZoom(
                                    position,
                                    Constants.ZOOM_CAMERA
                                )
                            )
                        }
                    }
                    scope.launch {
                        setOnCameraIdleListener {
                            val cameraPosition = map.cameraPosition
                            setLocation(
                                LocationModel(
                                    lat = cameraPosition.target.latitude,
                                    lng = cameraPosition.target.longitude
                                )
                            )
                        }
                    }
                }
            }
        }
    }

    // 自定义定位按钮，固定在右下角
    FloatingActionButton(
        modifier = Modifier
            .align(Alignment.BottomEnd)
            .padding(end = 16.dp, bottom = 24.dp),
        onClick = {
            // 点击后执行定位逻辑，获取当前位置移动相机
            if (permissionsState) {
                scope.launch {
                    // 替换为你自己的获取当前定位逻辑
                    val currentLoc = getCurrentLocation()
                    map?.moveCamera(
                        CameraUpdateFactory.newLatLngZoom(
                            LatLng(currentLoc.lat, currentLoc.lng),
                            Constants.ZOOM_CAMERA
                        )
                    )
                }
            }
        }
    ) {
        // 替换为你自定义的图标资源
        Icon(
            painter = painterResource(id = R.drawable.ic_custom_my_location),
            contentDescription = "定位到当前位置"
        )
    }
}

注意事项

• 可以把map实例提到外层作用域，方便按钮点击时直接调用地图相关方法
• 定位权限你已经做了状态判断，点击按钮时可追加权限校验逻辑避免崩溃
• 自定义按钮的样式、大小、背景色都可以自由修改，灵活度远高于原生默认按钮

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