Compose中GoogleMap初始加载慢主线程掉帧该如何优化

问题表现 #

使用Maps Compose Library实现地图展示时，初始加载速度极慢，日志抛出主线程过载提示：

Skipped 51 frames! The application may be doing too much work on its main thread.
（已跳过51帧！应用可能在主线程执行了过多耗时任务）
核心初始实现代码如下：

@Composable
fun Maps(latLng: LatLng, radius: Float) {
    val uiSettings = remember { MapUiSettings(zoomControlsEnabled = false, rotationGesturesEnabled = false) }

    val cameraPosition = CameraPosition(latLng, 15f, 0F, 0F)

    GoogleMap(modifier = Modifier.fillMaxSize(), uiSettings = uiSettings, cameraPositionState = CameraPositionState(cameraPosition)) 
}

优化目标：解决加载卡顿问题，实现地图加载过程中用户仍可正常与页面内其他元素进行交互。

可落地优化方案 #

按优先级排序执行即可：

• 修复状态错误复用问题：当前代码每次重组都会新建CameraPositionState实例，会触发地图反复重初始化，大量占用主线程资源。必须用官方提供的rememberCameraPositionState保存相机状态实例，仅在组件首次挂载时初始化，避免重组重复创建：

@Composable
fun Maps(latLng: LatLng, radius: Float) {
    val uiSettings = remember { 
        MapUiSettings(
            zoomControlsEnabled = false, 
            rotationGesturesEnabled = false
        ) 
    }
    // 固定保存相机状态实例，避免重组触发地图重加载
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition(latLng, 15f, 0F, 0F)
    }

    GoogleMap(
        modifier = Modifier.fillMaxSize(), 
        uiSettings = uiSettings, 
        cameraPositionState = cameraPositionState
    ) 
}

• 开启地图后台异步初始化：在AndroidManifest.xml中添加配置，将地图初始化的资源解码、类加载工作放到后台线程执行，避免阻塞主线程响应用户交互：

<application ...>
    <!-- 原有地图API_KEY配置保留 -->
    <meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="替换为你自己的地图API_KEY"/>
    <!-- 开启地图异步渲染，使用最新版渲染器 -->
    <meta-data
        android:name="com.google.android.gms.maps.MapsInitializer.Renderer"
        android:value="LATEST"/>
</application>

• 错峰加载地图，优先保证页面交互响应：不要在页面首次进入时就立刻挂载GoogleMap组件，先渲染页面其他可交互元素，等主线程空闲、首帧绘制完成后再加载地图，加载过程中用占位图填充地图区域：

@Composable
fun MapPage(latLng: LatLng, radius: Float) {
    var showMap by remember { mutableStateOf(false) }
    // 首帧绘制完成后再触发地图加载
    LaunchedEffect(Unit) {
        withContext(Dispatchers.Main.immediate) {
            Looper.myQueue().addIdleHandler {
                showMap = true
                false
            }
        }
    }

    Box(modifier = Modifier.fillMaxSize()) {
        // 其他可交互元素放在对应层级，地图加载过程中可正常响应操作
        OtherPageInteractiveComponents()
        
        if (showMap) {
            Maps(latLng = latLng, radius = radius)
        } else {
            // 地图区域占位骨架/静态图
            MapPlaceholder(modifier = Modifier.fillMaxSize())
        }
    }
}

• 关闭初始非必要图层，降低首屏计算量：首次加载时先关闭建筑、室内、实时路况等非必须图层，等底图加载完成后再按需开启，减少主线程渲染计算压力：

GoogleMap(
    modifier = Modifier.fillMaxSize(),
    uiSettings = uiSettings,
    cameraPositionState = cameraPositionState,
    // 初始关闭非必要图层，减少首屏加载资源量
    indoorEnabled = false,
    buildingsEnabled = false,
    trafficEnabled = false
) {
    // 标记、圆形覆盖物等业务逻辑
}

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