Jetpack Compose הוא ערכת כלים הצהרתית ונייטיבית לממשק משתמש, שמפשטת ומאיצה את פיתוח ממשק המשתמש. עם Jetpack Compose, אתם מתארים איך אתם רוצים שהאפליקציה תיראה, ו-Jetpack Compose מטפל בכל השאר.
ספריית Maps Compose של Maps SDK ל-Android היא קבוצה של פונקציות וסוגי נתונים שניתנים להרכבה בקוד פתוח, שאפשר להשתמש בהם עם Jetpack Compose כדי ליצור את האפליקציה.
ספריית Maps Compose מכילה פונקציות וסוגי נתונים שניתן להרכיב מהם קוד, ומאפשרת לבצע משימות נפוצות רבות. דוגמאות לפונקציות קומפוזביליות ולסוגי נתונים נפוצים:
קומפוזבילי | תיאור |
---|---|
מעגל | פונקציה שאפשר להרכיב ממנה פונקציות אחרות כדי להוסיף עיגול למפה. |
GoogleMap | פונקציה שאפשר להרכיב ממנה מפה. |
GroundOverlay | פונקציה שאפשר להרכיב ממנה פונקציות אחרות כדי להוסיף שכבת על של קרקע למפה. |
MapProperties | סוג הנתונים של מאפיינים שאפשר לשנות במפה. |
MapUISettings | סוג הנתונים של הגדרות שקשורות לממשק המשתמש במפה. |
סמן | פונקציה שאפשר להשתמש בה כדי להוסיף סמן למפה. |
Polygon | פונקציה שאפשר להרכיב ממנה פונקציות אחרות כדי להוסיף מצולע למפה. |
קו פוליגוני | פונקציה שאפשר להרכיב ממנה פונקציות אחרות כדי להוסיף קו שבור למפה. |
TileOverlay | פונקציה שאפשר להרכיב ממנה פונקציות אחרות כדי להוסיף שכבת על של משבצות למפה. |
רשימה מלאה של כל הפונקציות והטיפוסים של הנתונים שניתן להשתמש בהם מופיעה בחומר העזר בנושא Maps Compose library.
דרישות
כדי להשתמש בספריית Maps Compose עם Maps SDK ל-Android, צריך:
- מורידים ומתקינים את Android Studio Arctic Fox.
יוצרים פרויקט במפות Google ב-Android Studio באמצעות:
- סוג התבנית Empty Compose Activity. התבנית הזו מוסיפה את התלויות הנדרשות על ידי Jetpack Compose.
- גרסת ה-SDK המינימלית מוגדרת ל-API 21: Android 5.0 (Lollipop) ואילך.
- השפה Kotlin מוגדרת.
מקבלים מפתח API ומוסיפים אותו לפרויקט.
מתקינים את ספריית Maps Compose בפרויקט כמו שמתואר בקטע הבא.
התקנה
כדי להתקין את ספריית Maps Compose בפרויקט של מפות Google:
מוסיפים את יחסי התלות הבאים לקובץ
build.gradle.kts
ברמת המודול:dependencies { // Android Maps Compose composables for the Maps SDK for Android implementation("com.google.maps.android:maps-compose:6.7.1") }
כדי לסנכרן את השינויים האלה, צריך לבנות מחדש את הפרויקט ב-Android Studio.
הוספת מפה לאפליקציה
בדוגמה הבאה תוכלו לראות איך משתמשים ברכיב ה-Composable 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 (סמן) שניתן להרכבה בתוכן של המפה, כדי להוסיף סמן למפה.
כדי להשוות את הדוגמה הזו לדוגמה שמוסיפה מפה באמצעות Views, אפשר לעיין בQuickStart. שימו לב שפונקציות שאפשר להרכיב דורשות פחות קוד, ואין צורך לדאוג לגבי מחזור החיים של המפה.
הגדרת נכסים במפה
אפשר להגדיר מאפיינים במפה באמצעות אובייקט MapProperties או אובייקט MapUiSettings למאפיינים שקשורים לממשק המשתמש. אפשר לשנות את האובייקטים האלה כדי להפעיל יצירה מחדש של המפה.
בדוגמה שלמטה, משתמשים במתג, רכיב של 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) } ) }
המאמרים הבאים
- אפשר לעיין בספריית Maps Compose בדף הפרויקט ב-GitHub.
- מאמרי העזרה בנושא Jetpack Compose