ספרייה ליצירה של מפות Google

‫Jetpack Compose היא ערכת כלים דקלרטיבית לפיתוח ממשק משתמש נייטיב, שמפשטת ומאיצה את פיתוח ממשק המשתמש. עם Jetpack Compose, אתם מתארים איך אתם רוצים שהאפליקציה תיראה, ו-Jetpack Compose מטפל בכל השאר.

ספריית Maps Compose ל-SDK של מפות ל-Android היא קבוצה של פונקציות קומפוזביליות וסוגי נתונים בקוד פתוח, שאפשר להשתמש בהם עם Jetpack Compose כדי לפתח את האפליקציה.

ספריית Maps Compose מכילה פונקציות קומפוזביליות וסוגי נתונים שמאפשרים לבצע הרבה משימות נפוצות. הנה כמה מהפונקציות הקומפוזביליות וסוגי הנתונים הנפוצים:

פונקציה קומפוזבילית תיאור
עיגול פונקציה קומפוזבילית להוספת עיגול למפה.
GoogleMap פונקציה קומפוזבילית להוספת מפה.
GroundOverlay פונקציה קומפוזבילית להוספת שכבת-על של פני שטח למפה.
MapProperties סוג הנתונים של מאפיינים שאפשר לשנות במפה.
MapUISettings סוג הנתונים של הגדרות שקשורות לממשק המשתמש במפה.
סמן פונקציה קומפוזבילית להוספת סמן למפה.
Polygon פונקציה קומפוזבילית להוספת פוליגון למפה.
קו פוליגוני פונקציה קומפוזבילית להוספת קו פוליגוני למפה.
TileOverlay פונקציה קומפוזבילית להוספת שכבת-על של משבצות למפה.

רשימה מלאה של כל הפונקציות הקומפוזביליות וסוגי הנתונים מופיעה בחומר העזר בנושא ספריית Maps Compose.

דרישות

כדי להשתמש בספריית Maps Compose עם ה-SDK של מפות ל-Android, צריך:

  • מורידים ומתקינים את Android Studio Arctic Fox.
  • יוצרים פרויקט במפות Google ב-Android Studio עם:

    • תבנית מסוג Empty Compose Activity. התבנית הזו מוסיפה את יחסי התלות הנדרשים ל-Jetpack Compose.
    • ערכת ה-SDK המינימלית מוגדרת ל-Android API ברמה 23 (‏Marshmallow, ‏Android 6.0) או לגרסה מתקדמת יותר.
    • Language מוגדרת ל-Kotlin.
  • מקבלים מפתח API ומוסיפים אותו לפרויקט.

  • מתקינים את ספריית Maps Compose בפרויקט, כמו שמתואר בקטע הבא.

התקנה

כדי להתקין את ספריית Maps Compose בפרויקט של מפות Google:

  1. מוסיפים את יחסי התלות הבאים לקובץ build.gradle.kts ברמת המודול:

      dependencies {
    
        // Modern Android projects use version catalogs to manage dependencies. To include the Maps Compose library,
        // first add the following to your gradle/libs.versions.toml file:
        //
        // [versions]
        // mapsCompose = "8.4.0"
        //
        // [libraries]
        // maps-compose = { module = "com.google.maps.android:maps-compose", version.ref = "mapsCompose" }
        //
        // Android Maps Compose composables for the Maps SDK for Android
        implementation(libs.maps.compose)
        // If your project does not use a version catalog, you can use the following dependency instead:
        //
        //    implementation("com.google.maps.android:maps-compose:8.4.0")
    }

  2. כדי לסנכרן את השינויים האלה, צריך ליצור מחדש את הפרויקט ב-Android Studio.

הוספת מפה לאפליקציה

בדוגמה הבאה אפשר לראות איך משתמשים בפונקציה הקומפוזבילית GoogleMap כדי להוסיף מפה.

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

בדוגמה הזו, המפה תופסת את השטח המקסימלי המותר והמצלמה שלה ממורכזת סביב סינגפור. בנוסף, נוצר CameraPositionState והוא מסופק ב-cameraPositionState כדי להגדיר את מיקום המצלמה.

לאחר מכן, הדוגמה קוראת לפונקציה הקומפוזבילית Marker בתוכן של המפה כדי להוסיף סמן למפה.

כדי להשוות את הדוגמה הזו לדוגמה שבה מוסיפים מפה באמצעות תצוגות, אפשר לעיין במאמר QuickStart. שימו לב שפונקציות קומפוזביליות דורשות פחות קוד, ולא צריך לדאוג למחזור החיים של המפה.

הגדרת מאפיינים במפה

כדי להגדיר מאפיינים במפה, צריך לספק אובייקט MapProperties או אובייקט 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)
        },
    )
}

המאמרים הבאים