مكتبة "الكتابة في الخرائط"

‫Jetpack Compose هي مجموعة أدوات واجهة مستخدم أصلية تعريفية تعمل على تبسيط وتسريع تطوير واجهة المستخدم. باستخدام Jetpack Compose، يمكنك وصف الشكل الذي تريد أن يظهر به تطبيقك، ثم ترك Jetpack Compose يتولى الباقي.

مكتبة Compose لحزمة تطوير برامج "خرائط Google" بالاستناد إلى بيانات "خرائط Google" للتطبيقات المتوافقة مع Android هي مجموعة من الدوال المركّبة المفتوحة المصدر وأنواع البيانات التي يمكنك استخدامها مع Jetpack Compose لإنشاء تطبيقك.

تحتوي مكتبة Compose لحزمة تطوير برامج "خرائط Google" على دوال مركّبة وأنواع بيانات تتيح لك تنفيذ العديد من المهام الشائعة. تشمل بعض الدوال المركّبة وأنواع البيانات الشائعة الاستخدام ما يلي:

للحصول على قائمة كاملة بجميع الدوال المركّبة وأنواع البيانات، يُرجى الاطّلاع على مرجع مكتبة Compose لحزمة تطوير برامج "خرائط Google".

المتطلبات

لاستخدام مكتبة Compose لحزمة تطوير برامج "خرائط Google" مع حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" للتطبيقات المتوافقة مع Android، يجب اتّباع الخطوات التالية:

• نزِّل "استوديو Android" إصدار Arctic Fox وثبِّته.

• أنشئ مشروعًا في "خرائط Google" في "استوديو Android" باستخدام:

  • نوع نموذج نشاط إنشاء فارغ. يضيف هذا النموذج التبعيات اللازمة التي يتطلبها Jetpack Compose.
  • ضبط الحد الأدنى لإصدار حزمة تطوير البرامج (SDK) على المستوى 23 من واجهة برمجة تطبيقات Android (الإصدار Marshmallow؛ Android 6.0) أو إصدار أحدث
  • ضبط اللغة على Kotlin

• احصل على مفتاح واجهة برمجة التطبيقات وأضِفه إلى مشروعك.

• ثبِّت مكتبة Compose لحزمة تطوير برامج "خرائط Google" في المشروع كما هو موضَّح في القسم التالي.

تثبيت

لتثبيت مكتبة Compose لحزمة تطوير برامج "خرائط Google" في مشروعك على "خرائط 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" لمزامنة هذه التغييرات.

إضافة خريطة إلى تطبيقك

يوضّح المثال التالي كيفية استخدام الدالة المركّبة 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 للسمات ذات الصلة بواجهة المستخدم. يمكنك تعديل هذه العناصر لتشغيل إعادة تركيب الخريطة.

في المثال أدناه، استخدِم مفتاح تبديل، وهو مكوّن تصميم متعدد الأبعاد، لتبديل عناصر التحكّم في التكبير/التصغير على الخريطة.

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 الخاصة بمكتبة Compose لحزمة تطوير برامج "خرائط Google".
• اطّلِع على مستندات Jetpack Compose.