如何为Android应用中的Google Maps添加暗色遮罩且不影响标记点

针对你遇到的问题，这里提供三种可行的实现方式，满足地图轻微变暗、标记点不受影响的需求：

方案一：自定义地图样式（推荐） #

直接通过Google Maps的自定义样式调整地图整体色调，无需额外遮罩层，标记点会保持默认亮色，是最贴合需求的方案。

1. 使用Google Map Style Wizard工具，导入默认地图样式后调整参数：
   • 将**整体亮度（Brightness）**设为0.7-0.8区间，让地图呈现轻微暗色
   • 微调**饱和度（Saturation）**让地图色彩更柔和
   • 保留标记点（Markers）的默认亮色样式，不做修改
2. 生成JSON样式文件，放入项目res/raw目录（例如命名为dark_map_style.json）
3. 在代码中加载并应用该样式：

// 加载自定义地图样式
val mapStyle = MapStyleOptions.loadRawResourceStyle(context, R.raw.dark_map_style)

// 应用到GoogleMap的properties中
GoogleMap(
    modifier = Modifier.fillMaxSize(),
    properties = MapProperties().apply {
        mapStyle = mapStyle
        // 保留原有properties配置
        ...
    },
    ...
) {
    // 标记点将保持默认亮色，不受地图样式影响
}

方案二：调整Box层级分离地图与标记 #

把标记点从GoogleMap的内容块中移出，作为Box的直接子元素放在遮罩层上方，让遮罩仅覆盖地图区域。

修改后的代码示例：

Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(contentPadding)
) {
    // 底层：Google地图
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        googleMapOptionsFactory = {
            GoogleMapOptions().mapId(MapDefaults.mapId)
        },
        cameraPositionState = cameraPositionState,
        properties = style.mapProperties,
        uiSettings = style.mapUiSettings,
        onMapLoaded = {
            onMapLoaded()
        }
    ) {
        // 此处不再放置标记
    }

    // 中间层：半透明暗色遮罩，alpha值控制暗度（0.15为轻微暗色）
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black.copy(alpha = 0.15f))
    )

    // 顶层：标记点，需手动转换经纬度为屏幕坐标
    yourMarkers.forEach { marker ->
        val screenPosition = cameraPositionState.projection?.toScreenLocation(marker.latLng)
        screenPosition?.let { pos ->
            Icon(
                painter = painterResource(id = R.drawable.your_marker_icon),
                contentDescription = "Marker",
                modifier = Modifier
                    .offset(x = pos.x.toDp() - 12.dp, y = pos.y.toDp() - 24.dp) // 偏移量匹配标记中心
                    .size(24.dp)
            )
        }
    }
}

注意：这种方式需要在地图缩放、移动时实时更新标记的屏幕坐标，适合标记数量较少的场景。

方案三：使用GroundOverlay添加地图遮罩 #

利用Google Maps的GroundOverlay组件添加半透明覆盖层，该层级默认低于标记点，标记会自动显示在遮罩上方。

代码示例：

GoogleMap(
    modifier = Modifier.fillMaxSize(),
    ...
) {
    // 添加覆盖全球的半透明遮罩
    GroundOverlay(
        imageProvider = BitmapDescriptorFactory.fromBitmap(createTransparentOverlay()),
        position = LatLngBounds(
            LatLng(-90.0, -180.0),
            LatLng(90.0, 180.0)
        )
    )

    // 标记点自动显示在遮罩上方
    yourMarkers.forEach { marker ->
        Marker(
            position = marker.latLng,
            title = marker.title,
            icon = BitmapDescriptorFactory.fromResource(R.drawable.your_marker_icon)
        )
    }
}

// 创建半透明黑色位图的辅助方法
private fun createTransparentOverlay(): Bitmap {
    val bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)
    canvas.drawColor(Color.Black.copy(alpha = 0.15f))
    return bitmap
}

这种方式无需手动处理标记层级，遮罩会自动覆盖整个地图，标记不受影响，适合全局覆盖的场景。

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