Thư viện Maps Compose

Jetpack Compose là một bộ công cụ giao diện người dùng gốc, khai báo, giúp đơn giản hoá và tăng tốc quá trình phát triển giao diện người dùng. Với Jetpack Compose, bạn mô tả giao diện mà bạn muốn ứng dụng của mình có, sau đó để Jetpack Compose xử lý phần còn lại.

Thư viện Maps Compose cho Maps SDK cho Android là một nhóm các hàm composable nguồn mở và loại dữ liệu mà bạn có thể sử dụng với Jetpack Compose để xây dựng ứng dụng.

Thư viện Maps Compose chứa các hàm có khả năng kết hợp và loại dữ liệu cho phép bạn thực hiện nhiều tác vụ phổ biến. Một số hàm có khả năng kết hợp và loại dữ liệu thường dùng bao gồm:

Thành phần kết hợp Mô tả
Hình tròn Hàm composable để thêm một hình tròn vào bản đồ.
GoogleMap Hàm composable để thêm một bản đồ.
GroundOverlay Hàm composable để thêm một lớp phủ mặt đất vào bản đồ.
MapProperties Loại dữ liệu cho các thuộc tính có thể được sửa đổi trên bản đồ.
MapUISettings Loại dữ liệu cho các chế độ cài đặt liên quan đến giao diện người dùng trên bản đồ.
Điểm đánh dấu Hàm composable để thêm một điểm đánh dấu vào bản đồ.
Đa giác Hàm composable để thêm một đa giác vào bản đồ.
Hình nhiều đường Hàm composable để thêm một đường đa giác vào bản đồ.
TileOverlay Hàm composable để thêm một lớp phủ xếp kề vào bản đồ.

Để xem danh sách đầy đủ tất cả các hàm có khả năng kết hợp và loại dữ liệu, hãy xem Tài liệu tham khảo về thư viện Maps Compose.

Yêu cầu

Để sử dụng thư viện Maps Compose với Maps SDK cho Android, bạn phải:

  • Tải và cài đặt Android Studio Arctic Fox.

  • Tạo một dự án Google Maps trong Android Studio với:

    • Loại mẫu là Empty Compose Activity (Hoạt động Compose trống). Mẫu này thêm các phần phụ thuộc cần thiết mà Jetpack Compose yêu cầu.
    • SDK tối thiểu được đặt thành Android API Level 23 ("Marshmallow"; Android 6.0) trở lên.
    • Ngôn ngữ được đặt thành Kotlin.

  • Lấy khoá API và thêm khoá đó vào dự án của bạn.

  • Cài đặt thư viện Maps Compose trong dự án như mô tả trong phần tiếp theo.

Cài đặt

Cách cài đặt thư viện Maps Compose trong dự án Google Maps:

  1. Thêm các phần phụ thuộc sau vào tệp build.gradle.kts ở cấp mô-đun:

      dependencies {

    // Android Maps Compose composables for the Maps SDK for Android
    implementation("com.google.maps.android:maps-compose:6.12.0")
}

  2. Xây dựng lại dự án trong Android Studio để đồng bộ hoá các thay đổi này.

Thêm bản đồ vào ứng dụng

Ví dụ sau đây cho biết cách sử dụng thành phần kết hợp GoogleMap để thêm một bản đồ. 

val singapore = LatLng(1.35, 103.87)
val singaporeMarkerState = rememberUpdatedMarkerState(position = singapore)
val cameraPositionState = rememberCameraPositionState {
  position = CameraPosition.fromLatLngZoom(singapore, 10f)
}
GoogleMap(
  modifier = Modifier.fillMaxSize(),
  cameraPositionState = cameraPositionState
) {
  Marker(
    state = singaporeMarkerState,
    title = "Singapore",
    snippet = "Marker in Singapore"
  )
}

Trong ví dụ này, bản đồ chiếm không gian tối đa được phép và máy ảnh của bản đồ được căn giữa xung quanh Singapore. A CameraPositionState cũng được tạo và cung cấp trong cameraPositionState để đặt vị trí của máy ảnh.

Sau đó, ví dụ này sẽ gọi thành phần kết hợp Điểm đánh dấu trong nội dung của bản đồ để thêm một điểm đánh dấu vào bản đồ.

Để so sánh ví dụ này với một ví dụ thêm bản đồ bằng cách sử dụng Khung hiển thị, hãy xem phần QuickStart. Lưu ý rằng các hàm có khả năng kết hợp yêu cầu ít mã hơn và bạn không phải lo lắng về vòng đời của bản đồ.

Đặt thuộc tính trên bản đồ

Bạn có thể đặt các thuộc tính trên bản đồ bằng cách cung cấp đối tượng MapProperties hoặc đối tượng MapUiSettings cho các thuộc tính liên quan đến giao diện người dùng. Bạn có thể sửa đổi các đối tượng này để kích hoạt quá trình kết hợp lại bản đồ của.

Trong ví dụ bên dưới, hãy sử dụng một Thành phần chuyển đổi, một thành phần Material Design, để bật/tắt các nút điều khiển thu phóng trên bản đồ.

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

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

Bước tiếp theo