如何在撰写文章时创建自定义 Google 地图标记图标

要创建如图所示的标记，您需要遵循以下步骤。

步骤 1. 创建自定义标记可组合项

@Composable
fun CustomMarkerView(text: String) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .size(100.dp)
            .background(Color.Red, shape = RoundedCornerShape(50.dp))
            .border(2.dp, Color.Black, shape = RoundedCornerShape(50.dp))
    ) {
        Text(text, color = Color.White, fontSize = 16.sp)
    }
}

第 2 步：将可组合项转换为位图

fun createMarkerBitmap(context: Context, text: String): Bitmap {
    // Create an empty Bitmap with a specific width, height, and config
    val bitmap = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)  // Initialize a Canvas to draw on the bitmap

    // Get the device screen density (to scale things correctly)
    val density = context.resources.displayMetrics.density

    // Create a ComposeView that will render the composable into a view
    val composeView = ComposeView(context).apply {
        setContent {
            // Render the custom marker composable inside this ComposeView
            CustomMarkerView(text = text)
        }
    }

    // Measure and layout the ComposeView to be rendered correctly
    composeView.measure(
        View.MeasureSpec.makeMeasureSpec((100 * density).toInt(), View.MeasureSpec.EXACTLY),
        View.MeasureSpec.makeMeasureSpec((100 * density).toInt(), View.MeasureSpec.EXACTLY)
    )
    composeView.layout(0, 0, composeView.measuredWidth, composeView.measuredHeight)

    // Finally, draw the ComposeView on the Canvas (which is linked to the Bitmap)
    composeView.draw(canvas)

    return bitmap  // Return the resulting Bitmap with the custom composable drawn
}

步骤 3. 在 Google 地图标记中使用 BitmapDescriptor

val customMarkerBitmap = createMarkerBitmap(context, "22222")  // Create the bitmap with the desired text
val markerOptions = MarkerOptions()
    .position(LatLng(0.0, 0.0))  // Set the position of the marker
    .icon(BitmapDescriptorFactory.fromBitmap(customMarkerBitmap))  // Use the generated Bitmap as the icon
googleMap.addMarker(markerOptions)  // Add the marker to the GoogleMap instance

工作原理： 自定义标记设计：可CustomMarkerView组合项定义如何绘制标记。在本例中，它是一个带有黑色边框和居中文本的红色圆圈。

可组合到位图：该函数为createMarkerBitmap。它获取此可组合并将其渲染为位图。为此，它使用 ，Canvas先在 内渲染，然后将其绘制到位图上ComposeView。

Google 地图标记：接下来，将此位图转换为BitmapDescriptor，以便可以将其用作 Google 地图中的标记图标MarkerOptions。

我认为这种方法比使用更有效AdvancedMarker，并且避免了您遇到的滞后。

您可以简单地使用MarkerComposable而不是Marker因为两者都可用Marker.kt，而且，MarkerComposable允许您使用任何类型的内容作为标记，因为它在内部使用 ComposeToBitmapDescriptor 将可组合内容呈现为图标！

示例实现：

@Composable
fun SimpleMap(
) {
    val latLng = LatLng( -33.8568, 151.2153) // Sydney Opera House lat lng

    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(latLng, 14f)
    }
    val mapProperties = remember {
        MapProperties(
            mapType = MapType.HYBRID,
        )
    }
    GoogleMap(
        cameraPositionState = cameraPositionState,
        properties = mapProperties,
        uiSettings = MapUiSettings(
            myLocationButtonEnabled = false,
            compassEnabled = false,
            mapToolbarEnabled = false
        ),
    ) {
        MarkerComposable(
            state = rememberMarkerState(position = latLng),
            title = "Sydney Opera House"
        ) {
                Box(
                    modifier = Modifier
                        .size(100.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = null,
                        tint = Color.Red,
                        modifier = Modifier.matchParentSize()
                    )
                    Text("22222", color = Color.White)
                }

        }
    }
}

在上面的例子中，我使用了 Icon，您可以保留任何类似图像组件的东西来代替 Icon！