开源跨平台地图开发接口（七爪源码将Google）
开源跨平台地图开发接口（七爪源码将Google）通过调用 GoogleMap() 我们将在我们的应用程序中显示地图。就那么简单！ GoogleMap 是 MapView 的组合容器。它允许我们在我们的应用程序中显示地图。我们可以将许多参数传递给这个可组合对象，但它们都是可选的。将地图集成到应用程序implementation 'com.google.maps.android:maps-compose:2.7.2' implementation 'com.google.android.gms:play-services-maps:18.1.0'注意：检查这些依赖项是否有更新版本。接下来，在您的清单文件中，添加以下元数据：<meta-data android:name="com.google.android.geo.API_KEY" android:value="
Jetpack Compose Maps Compose 库
今天我们将讨论如何将地图集成到您的 Jetpack Compose 应用程序中。 为此，我们将使用 Maps Compose Library。
“Maps Compose 库包含可组合的函数和数据类型，可让您执行许多常见任务。”
接下来，让我们包含所需的依赖项：
implementation 'com.google.maps.android:maps-compose:2.7.2'
implementation 'com.google.android.gms:play-services-maps:18.1.0'
注意：检查这些依赖项是否有更新版本。
接下来，在您的清单文件中，添加以下元数据：
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="${MAPS_API_KEY}" />
现在我们已经准备好在我们的代码中实现地图了！
将地图集成到应用程序
通过调用 GoogleMap() 我们将在我们的应用程序中显示地图。就那么简单！ GoogleMap 是 MapView 的组合容器。它允许我们在我们的应用程序中显示地图。我们可以将许多参数传递给这个可组合对象，但它们都是可选的。
部分参数如下：
- cameraPositionState: CameraPositionState — 用于控制或观察地图的相机状态。
- googleMapOptionsFactory: () -> GoogleMapOptions — 创建地图时提供的用于创建 GoogleMapOptions 的块。
- 属性： MapProperties — 地图的属性，例如 isBuildingEnabled、isIndoorEnabled、isMyLocationEnabled 等。如果 isMyLocationEnabled 设置为 true，那么我们需要请求精细位置和粗略位置的权限。要了解如何在 Jetpack compose 中请求位置权限，请查看我之前的一篇文章。
- uiSettings：MapUiSettings— 地图上的 UI 特定设置，如 compassEnabled、scrollGesturesEnabled、rotationGesturesEnabled 等。
- 各种 lambda，如 onMapClicked、onMapLoaded、onMyLocationButtonClick。
接下来，我们可以将相机状态设置为放大某个特定位置。
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(LatLng(44.810058 20.4617586) 16f)
}
标记
如果我们想要标记地点，例如最近的加油站、酒店或您需要的任何地方，该怎么办？ 图书馆为我们提供了保障。 我们可以为此使用标记。
可组合标记有几个参数。 我们将介绍最常用的，但请随时检查它们。
- state：MarkerState — 用于控制或观察标记状态，例如其位置和信息窗口。
- draggable: Boolean — 设置标记的可拖动性。
- flat: Boolean — 设置标记是否应该与地图平齐。
- icon: BitmapDescriptor — 设置标记的图标。
- 各种 lambda，如 onClick、onInfoWindowClick、onInfoWindowClose 和 onInfoWindowLongClick。
现在，让我们添加一些不同颜色的标记。 这是代码：
@Composable
fun GoogleMarkers() {
Marker(
state = rememberMarkerState(position = LatLng(44.811058 20.4617586))
title = "Marker1"
icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_RED)
)
Marker(
state = rememberMarkerState(position = LatLng(44.811058 20.4627586))
title = "Marker2"
icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ORANGE)
)
Marker(
state = rememberMarkerState(position = LatLng(44.810058 20.4627586))
title = "Marker3"
icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_YELLOW)
)
Marker(
state = rememberMarkerState(position = LatLng(44.809058 20.4627586))
title = "Marker4"
icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN)
)
Marker(
state = rememberMarkerState(position = LatLng(44.809058 20.4617586))
title = "Marker5"
icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_CYAN)
)
}
您还可以从资产、资源、位图、文件等中获取标记的图标。 如果单击任何标记，您将看到一个带有标记标题的信息窗口。
折线
接下来我们可以做的是在点之间画一条线。 我们可以为此使用折线。
它只有一个必需参数，即纬度和经度列表。 其他一些参数是：
- clickable: Boolean — 指示折线是否可点击的布尔值
- color: Color — 折线的颜色
- startCap: Cap — 折线起始顶点处的上限
- endCap: Cap — 折线末端顶点处的帽
- width: Float — 以屏幕像素为单位的折线宽度
- onClick: (Polyline) -> Unit — 单击折线时调用的 lambda
我们将只添加一条连接标记的折线：
Polyline(
points = listOf(
LatLng(44.811058 20.4617586)
LatLng(44.811058 20.4627586)
LatLng(44.810058 20.4627586)
LatLng(44.809058 20.4627586)
LatLng(44.809058 20.4617586)
)
)
最终代码如下所示：
@OptIn(ExperimentalPermissionsApi::class)
@Composable
fun MainScreen() {
val multiplePermissionState = rememberMultiplePermissionsState(
permissions = listOf(
Manifest.permission.ACCESS_COARSE_LOCATION
Manifest.permission.ACCESS_FINE_LOCATION
)
)
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(LatLng(44.810058 20.4617586) 17f)
}
LaunchedEffect(Unit) {
multiplePermissionState.launchMultiplePermissionRequest()
}
MediumReposTheme {
Column(
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colors.background)
.padding(16.dp)
) {
Text(
text = "Welcome to the MapsApp!"
style = MaterialTheme.typography.h5
modifier = Modifier.fillMaxWidth()
textAlign = TextAlign.Center
)
Spacer(modifier = Modifier.height(32.dp))
PermissionsRequired(
multiplePermissionsState = multiplePermissionState
permissionsNotGrantedContent = { /* ... */ }
permissionsNotAvailableContent = { /* ... */ }
) {
GoogleMap(
cameraPositionState = cameraPositionState
modifier = Modifier.weight(1f)
properties = MapProperties(isMyLocationEnabled = true)
uiSettings = MapUiSettings(compassEnabled = true)
) {
GoogleMarkers()
Polyline(
points = listOf(
LatLng(44.811058 20.4617586)
LatLng(44.811058 20.4627586)
LatLng(44.810058 20.4627586)
LatLng(44.809058 20.4627586)
LatLng(44.809058 20.4617586)
)
)
}
}
}
}
}
@Composable
fun GoogleMarkers() {
Marker(
state = rememberMarkerState(position = LatLng(44.811058 20.4617586))
title = "Marker1"
icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_RED)
)
Marker(
state = rememberMarkerState(position = LatLng(44.811058 20.4627586))
title = "Marker2"
icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ORANGE)
)
Marker(
state = rememberMarkerState(position = LatLng(44.810058 20.4627586))
title = "Marker3"
icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_YELLOW)
)
Marker(
state = rememberMarkerState(position = LatLng(44.809058 20.4627586))
title = "Marker4"
icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN)
)
Marker(
state = rememberMarkerState(position = LatLng(44.809058 20.4617586))
title = "Marker5"
icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_CYAN)
)
}
我们可以在地图周围使用许多选项和可组合项，但现在不需要全部介绍。
我们的 MapsApp 就是这样，我希望你在这篇文章中学到了一些新东西并且你喜欢它。
关注七爪网，获取更多APP/小程序/网站源码资源！
