Maps Compose 程式庫

Jetpack Compose 是宣告式原生 UI 工具包，可以簡化和加速 UI 開發作業。您只要描述想呈現的應用程式外觀，就能透過 Jetpack Compose 執行。

Maps SDK for Android 的 Maps Compose 程式庫中，收錄開放原始碼的可組合函式和資料類型，可與 Jetpack Compose 搭配建構應用程式。

Maps Compose 程式庫包含可組合函式和資料類型，可用於執行多項常見工作。以下列舉一些常用的可組合函式和資料類型：

可組合函式 說明
Circle 可在地圖上新增圓形的可組合函式。
GoogleMap 用於新增地圖的可組合函式。
GroundOverlay 可在地圖上新增區域疊加層的可組合函式。
MapProperties ��圖上可修改屬性的資料類型。
MapUISettings 地圖上 UI 相關設定的資料類型。
Marker 可在地圖上新增標記的可組合函式。
Polygon 可在地圖上新增多邊形的可組合函式。
Polyline 可在地圖上新增折線的可組合函式。
TileOverlay 可在地圖上新增圖塊疊加層的可組合函式。

如需所有可組合函式和資料類型的完整清單，請參閱 Maps Compose 程式庫參考資料。

需求條件

如要搭配使用 Maps Compose 程式庫與 Maps SDK for Android，請務必完成以下步驟：

  • 下載並安裝 Android Studio Arctic Fox。

  • 在 Android Studio 中，按照以下方式建立 Google 地圖專案：

    • 選取「Empty Compose Activity」為範本類型。這個範本會新增 Jetpack Compose 所需的必要依附元件。
    • 將「Minimum SDK」設為「API 21: Android 5.0 (Lollipop)」以上版本。
    • 將「Language」(程式語言) 設為「Kotlin」。

  • 取得 API 金鑰並加進專案。

  • 按照下一節的說明，在專案中安裝 Maps Compose 程式庫。

安裝

如要在 Google 地圖專案中安裝 Maps Compose 程式庫，請按照下列步驟操作：

  1. 將以下依附元件加進模組層級 build.gradle 檔案：

      dependencies {


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

  2. 在 Android Studio 中重新建立專案，同步處理這些變更。

在應用程式中新增地圖

下例示範如何使用 GoogleMap 可組合函式新增地圖。

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"
  )
}

在這個範例中，地圖占用了允許使用的最大空間，且相機位置是以新加坡為中心。cameraPositionState 中也會建立並提供 CameraPositionState，以便設定相機位置。

接著，範例呼叫地圖內容中的 Marker 可組合函式，以在地圖上新增標記。

如要將本範例與使用 Views 新增地圖的範例進行比較，請參閱快速入門導覽課程。請留意可組合函式所需的程式碼較少，而且您不必擔心地圖的生命週期。

設定地圖上的屬性

提供 MapProperties 物件，或為 UI 相關屬性提供 MapUiSettings 物件，即可設定地圖上的屬性。您可以修改這些物件來觸發地圖重新組合。

以下範例使用 Switch (一種 Material Design 元件) 來切換地圖上的縮放控制項。

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)
    }
  )
}

後續主題