Jetpack Compose הוא ערכת כלים מוצהרת ומקורית לממשק משתמש שמפשטת ומאיצה את פיתוח ממשק המשתמש. ב-Jetpack Compose, אתם מתארים איך אתם רוצים שהאפליקציה תיראה, ואז נותנים ל-Jetpack Compose לטפל בשאר.
ספריית Maps Compose של SDK של מפות ל-Android היא קבוצה של פונקציות וסוגי נתונים שניתנים לשילוב בקוד פתוח, שאפשר להשתמש בהם עם Jetpack Compose כדי ליצור את האפליקציה.
ספריית פיתוח נייטיב למפות מכילה פונקציות וסוגים של נתונים שאפשר לשלב ביניהם, ומאפשרת לבצע משימות נפוצות רבות. דוגמאות לסוגי נתונים ולפונקציות קומפוזביליות נפוצות:
קומפוזבילי | תיאור |
---|---|
מעגל | פונקציה קומפוזבילית להוספת מעגל למפה. |
GoogleMap | פונקציה קומפוזבילית להוספת מפה. |
GroundOverlay | פונקציה שאפשר לשלב כדי להוסיף למפה שכבת-על של פני השטח. |
MapProperties | סוג הנתונים של נכסים שניתן לשנות במפה. |
MapUISettings | סוג הנתונים של הגדרות שקשורות לממשק המשתמש במפה. |
סמן | פונקציה שאפשר לשלב כדי להוסיף סימן למפה. |
Polygon | פונקציה שאפשר לשלב כדי להוסיף פוליגון למפה. |
קו פוליגוני | פונקציה קומפוזבילית להוספת קו פוליגוני למפה. |
TileOverlay | פונקציה שאפשר לשלב כדי להוסיף שכבת-על של משבצות למפה. |
רשימה מלאה של כל סוגי הנתונים והפונקציות שאפשר לשלב מופיעה במאמר חומר עזר בנושא ספריית Maps Compose.
דרישות
כדי להשתמש בספריית פיתוח נייטיב למפות עם ה-SDK של מפות ל-Android, צריך:
- מורידים ומתקינים את Android Studio Arctic Fox.
יוצרים פרויקט של מפות Google ב-Android Studio באמצעות:
- סוג תבנית של פעילות כתיבה ריקה. התבנית הזו מוסיפה את יחסי התלות הנדרשים שנדרשים על ידי Jetpack Compose.
- גרסת ה-SDK המינימלית מוגדרת ל-API 21: Android 5.0 (Lollipop) ואילך.
- Language (שפה) מוגדרת כ-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.1.0") }
כדי לסנכרן את השינויים האלה, צריך ליצור מחדש את הפרויקט ב-Android Studio.
הוספת מפה לאפליקציה
בדוגמה הבאה מוסבר איך להשתמש ברכיב GoogleMap כדי להוסיף מפה.
val singapore = LatLng(1.35, 103.87) val singaporeMarkerState = rememberMarkerState(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 למאפיינים שקשורים לממשק המשתמש. אפשר לשנות את האובייקטים האלו כדי להפעיל הרכבה מחדש של המפה.
בדוגמה הבאה נעשה שימוש במתג, רכיב של 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) } ) }
המאמרים הבאים
- דף הפרויקט ב-GitHub של ספריית Maps Compose
- לעיון במסמכי התיעוד של Jetpack Compose