如何在Google Map Compose中重新定位指南针图标

方案一：修改默认指南针的位置 #

Google Map Compose底层基于View的MapView实现，默认指南针View的内部标记为GoogleMapCompass，我们可以通过获取MapView实例并修改其布局参数来调整位置：

实现代码 #

@Composable
fun CustomPositionCompassMap() {
    val mapView = rememberMapViewWithLifecycle()
    val context = LocalContext.current

    // 等待MapView布局完成后查找指南针
    LaunchedEffect(mapView) {
        mapView.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
            override fun onGlobalLayout() {
                mapView.viewTreeObserver.removeOnGlobalLayoutListener(this)
                
                // 通过Tag查找指南针View
                val compassView = mapView.findViewWithTag<View>("GoogleMapCompass")
                compassView?.let {
                    // 调整布局margin，自定义位置
                    val layoutParams = it.layoutParams as FrameLayout.LayoutParams
                    layoutParams.apply {
                        // 示例：距离顶部64dp，右侧32dp
                        topMargin = 64.dpToPx(context)
                        rightMargin = 32.dpToPx(context)
                    }
                    it.layoutParams = layoutParams
                }
            }
        })
    }

    Box(modifier = Modifier.fillMaxSize()) {
        AndroidView(
            factory = { mapView },
            modifier = Modifier.fillMaxSize()
        ) { view ->
            view.getMapAsync { googleMap ->
                // 保留默认指南针启用状态
                googleMap.uiSettings.isCompassEnabled = true
                // 其他地图配置逻辑
            }
        }
    }
}

// DP转PX扩展函数
fun Int.dpToPx(context: Context): Int {
    return TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        this.toFloat(),
        context.resources.displayMetrics
    ).toInt()
}

注意事项 #

• 该方案依赖Google Maps SDK的内部实现（GoogleMapCompass这个Tag），未来版本可能存在变更风险，需在目标SDK版本中测试验证。
• 必须等待MapView布局完成后再查找指南针，否则会返回null。

方案二：自定义指南针（更稳定可靠） #

如果担心内部实现变更，推荐隐藏默认指南针，在Compose层自定义一个指南针组件，完全控制其样式和位置：

实现代码 #

@Composable
fun CustomCompassMap() {
    val mapView = rememberMapViewWithLifecycle()
    var googleMap: GoogleMap? by remember { mutableStateOf(null) }
    val cameraBearing by remember {
        derivedStateOf { googleMap?.cameraPosition?.bearing ?: 0f }
    }

    Box(modifier = Modifier.fillMaxSize()) {
        AndroidView(
            factory = { mapView },
            modifier = Modifier.fillMaxSize()
        ) { view ->
            view.getMapAsync { map ->
                googleMap = map
                // 隐藏默认指南针
                map.uiSettings.isCompassEnabled = false
                // 其他地图配置逻辑
            }
        }

        // 自定义指南针，放置在右上角
        Icon(
            painter = painterResource(id = R.drawable.ic_custom_compass),
            contentDescription = "Compass",
            tint = Color.White,
            modifier = Modifier
                .size(48.dp)
                .padding(top = 64.dp, end = 32.dp)
                .align(Alignment.TopEnd)
                .rotate(cameraBearing)
        )
    }
}

优势 #

• 不依赖SDK内部实现，兼容性更强。
• 可完全自定义指南针的图标、大小、颜色和位置。
• 直接响应地图相机的旋转角度，逻辑清晰。

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