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

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

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

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

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

المتطلبات

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

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

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

  • نوع نموذج نشاط إنشاء فارغ يضيف هذا النموذج التبعيات اللازمة التي يتطلّبها Jetpack Compose.
  • يجب ضبط الحد الأدنى لإصدار حزمة تطوير البرامج (SDK) على المستوى 23 من واجهة برمجة التطبيقات Android ("Marshmallow"؛ الإصدار 6.0 من نظام التشغيل Android) أو إصدار أحدث.
  • تم ضبط اللغة على 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 في محتوى الخريطة لإضافة علامة إلى الخريطة.

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