如何在Android Jetpack Compose中实现Google地图热力图？

目前Google官方的maps-compose和maps-compose-utils库确实没有提供原生的Compose热力图API，官方文档也暂无相关实现指引，但不需要切换到XML地图，有可行的适配方案：

核心思路：复用原生Android地图的热力图能力 #

通过Compose的GoogleMap组件获取底层的GoogleMap实例，结合原生Android地图的HeatmapTileProvider来添加热力图，同时适配Compose的生命周期管理。

方案一：基础实现 #

直接在GoogleMap的回调中创建并添加热力图，同时处理资源清理：

@Composable
fun HeatmapEnabledMap() {
    // 模拟热力图数据
    val heatmapData = remember {
        listOf(
            LatLng(39.9042, 116.4074),
            LatLng(31.2304, 121.4737),
            LatLng(23.1291, 113.2644),
            // 添加更多经纬度点
        )
    }

    val mapLoadedCallback = rememberMapCallback { googleMap ->
        // 创建热力图TileProvider
        val heatmapProvider = HeatmapTileProvider.Builder()
            .data(heatmapData)
            .opacity(0.7f) // 自定义透明度
            .gradient(Gradient(
                colors = intArrayOf(Color.parseColor("#00FF00"), Color.parseColor("#FF0000")),
                startPoints = floatArrayOf(0.2f, 1.0f)
            )) // 自定义颜色渐变
            .build()

        // 添加热力图到地图
        val tileOverlay = googleMap.addTileOverlay(
            TileOverlayOptions().tileProvider(heatmapProvider)
        )

        // 绑定Compose生命周期，组件销毁时移除热力图，避免内存泄漏
        DisposableEffect(Unit) {
            onDispose {
                tileOverlay.remove()
            }
        }
    }

    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        onMapLoaded = mapLoadedCallback,
        cameraPositionState = rememberCameraPositionState {
            position = CameraPosition.fromLatLngZoom(LatLng(30.0, 110.0), 5f)
        }
    )
}

方案二：封装可复用的Compose组件 #

将热力图逻辑封装成独立的Compose组件，提升代码复用性：

@Composable
fun MapHeatmap(
    heatmapData: List<LatLng>,
    configureProvider: HeatmapTileProvider.Builder.() -> Unit = {}
) {
    // 获取当前GoogleMap实例
    val googleMap = rememberGoogleMap()

    // 监听数据和地图实例变化，更新或重建热力图
    DisposableEffect(googleMap, heatmapData) {
        val provider = HeatmapTileProvider.Builder()
            .data(heatmapData)
            .apply(configureProvider)
            .build()

        val overlay = googleMap.addTileOverlay(TileOverlayOptions().tileProvider(provider))

        onDispose {
            overlay.remove()
        }
    }
}

// 使用示例
@Composable
fun MyCustomMap() {
    val heatmapData = remember { /* 加载或初始化你的热力图数据 */ }

    GoogleMap(modifier = Modifier.fillMaxSize()) {
        // 直接在Map作用域内添加热力图组件
        MapHeatmap(heatmapData) {
            opacity(0.6f)
            radius(50) // 自定义热力点半径
        }
    }
}

注意事项 #

• 确保已经在项目中添加了Google地图的依赖，包括核心地图库和play-services-maps（因为HeatmapTileProvider属于该库）
• 热力图数据量较大时，建议做数据分批加载或优化，避免影响地图渲染性能

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