Thư viện Maps Compose

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

Thư viện Maps Compose cho SDK Maps dành cho Android là một tập hợp các hàm và kiểu dữ liệu có khả năng kết hợp nguồn mở mà bạn có thể sử dụng với Jetpack Compose để tạo ứng dụng.

Thư viện Maps Compose chứa các hàm và kiểu dữ liệu có khả năng kết hợp cho phép bạn thực hiện nhiều tác vụ phổ biến. Sau đây là một số hàm và kiểu dữ liệu có khả năng kết hợp thường dùng:

Thành phần kết hợp Nội dung mô tả
Vòng kết nối Hàm có khả năng kết hợp để thêm một vòng tròn vào bản đồ.
GoogleMap Hàm có khả năng kết hợp để thêm bản đồ.
GroundOverlay Hàm có khả năng kết hợp để thêm lớp phủ mặt đất vào bản đồ.
MapProperties Loại dữ liệu cho những tài sản mà bạn có thể 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 có khả năng kết hợp để thêm một điểm đánh dấu vào bản đồ.
Đa giác Hàm có khả năng kết hợp để thêm một đa giác vào bản đồ.
Hình nhiều đường Hàm có khả năng kết hợp để thêm một hình nhiều đường vào bản đồ.
TileOverlay Hàm có khả năng kết hợp để thêm một lớp phủ xếp kề vào bản đồ.

Để xem danh sách đầy đủ tất cả hàm và kiểu dữ liệu có khả năng kết hợp, 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 SDK bản đồ dành cho Android, bạn phải:

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

  • Tạo một dự án Google Maps trong Android Studio bằng:

    • Loại mẫu Empty Compose Activity (Hoạt động trống trong Compose). Mẫu này bổ sung các phần phụ thuộc cần thiết theo yêu cầu của Jetpack Compose.
    • Minimum SDK (SDK tối thiểu) được đặt thành API 21: Android 5.0 (Lollipop) trở lên.
    • Language (Ngôn ngữ) được đặt thành Kotlin.

  • Lấy một 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 ở cấp mô-đun:

      dependencies {


    // Android Maps Compose composables for the Maps SDK for Android
    implementation 'com.google.maps.android:maps-compose:4.3.3'
}

  2. Tạo lại dự án trong Android Studio để đồng bộ hoá những thay đổi này.

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

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

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

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

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

Để so sánh ví dụ này với ví dụ thêm bản đồ bằng cách sử dụng Chế độ xem, hãy xem QuickStart. Hãy để ý đến việc 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 cơ sở lưu trú 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 một đối tượng MapProperties hoặc một đố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 tái kết hợp bản đồ.

Trong ví dụ bên dưới, hãy sử dụng Switch, một thành phần Material Design, để bật/tắt các chế độ đ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)
    }
  )
}

Các bước tiếp theo