带有 Jetpack Compose 的 Google 地图标记未在 Android 中显示答案

【问题标题】：Google map marker not showing in Android with jetpack compose带有 Jetpack Compose 的 Google 地图标记未在 Android 中显示
【发布时间】：2023-02-11 01:46:09
【问题描述】：

我在使用 Jetpack Compose 的 Android 上遇到地图标记问题。我已经按照官方文档进行操作，但我找不到使它工作的方法，而且我不知道我做了与教程建议的完全相同的事情。

目前标记没有显示，相机位置也没有。我不认为这是一个 API 密钥问题，因为我没有收到关于它的警告或错误。这是代码：

import android.content.Context
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Switch
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import com.example.citylife.ui.theme.CityLifeTheme
import com.google.android.gms.maps.model.CameraPosition
import com.google.android.gms.maps.model.LatLng
import com.google.maps.android.compose.*

class MapActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CityLifeTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                    MapElement(applicationContext)
                }
            }
        }
    }
}

@Composable
fun MapElement(context: Context) {
    val singapore = LatLng(1.35, 103.87)
    val singaporeState = MarkerState(position = singapore)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(singapore, 10f)
    }

    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    ) {
        Marker(
            state = singaporeState,
            title = "Singapore",
            snippet = "Marker for singapore"
        )
    }

    var uiSettings by remember { mutableStateOf(MapUiSettings()) }
    val properties by remember {
        mutableStateOf(MapProperties(mapType = MapType.NORMAL))
    }

    Box(Modifier.fillMaxSize()) {
        GoogleMap(
            modifier = Modifier.matchParentSize(),
            properties = properties,
            uiSettings = uiSettings
        )
        Switch(
            checked = uiSettings.zoomControlsEnabled,
            onCheckedChange = {
                uiSettings = uiSettings.copy(zoomControlsEnabled = it)
            }
        )
    }
}

如您所见，我是从文档中复制的，一切正常，但标记和相机位置不知何故不起作用，您有什么建议吗？先感谢您。

【问题讨论】：

请考虑将我的答案标记为正确，或者如果不能解决问题，请提供其他信息。

标签： android kotlin google-maps android-jetpack-compose google-maps-markers

【解决方案1】：

您有两个 GoogleMap 可组合项，其中一个在另一个之上绘制。

此代码会将两者结合起来，为您提供标记和开关可组合项：

@Composable
fun MapElement(context: Context) {
    val singapore = LatLng(1.35, 103.87)
    val singaporeState = MarkerState(position = singapore)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(singapore, 10f)
    }
    var uiSettings by remember { mutableStateOf(MapUiSettings()) }
    val properties by remember {
        mutableStateOf(MapProperties(mapType = MapType.NORMAL))
    }

    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    ) {
        Marker(
            state = singaporeState,
            title = "Singapore",
            snippet = "Marker for singapore"
        )
        Switch(
            checked = uiSettings.zoomControlsEnabled,
            onCheckedChange = {
                uiSettings = uiSettings.copy(zoomControlsEnabled = it)
            }
        )
    }
}

我没有运行这段代码，但它应该可以运行。

【讨论】：

【解决方案2】：

问题是，您使用的是两种彼此重叠的 GoogleMap 方法。我写了一篇关于这个主题的文章，以及如何在撰写时制作自定义标记：

https://towardsdev.com/jetpack-compose-custom-google-map-marker-erselan-khan-e6e04178a30b

【讨论】：