إضافة خريطة

اختيار النظام الأساسي: Android‏ iOS‏ JavaScript‏

يتم تمثيل الخرائط في واجهة برمجة التطبيقات من خلال الفئة GMSMapView، وهي فئة فرعية من UIView. الخريطة هي العنصر الأكثر أهمية في حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" للتطبيقات المتوافقة مع iOS، وتوفّر الطرق اللازمة لإضافة العناصر الأخرى وإزالتها وإدارتها، مثل العلامات والخطوط المتعدّدة.

مقدمة

تتيح لك حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" للتطبيقات المتوافقة مع iOS عرض خريطة Google في تطبيقك المتوافق مع iOS. تظهر هذه الخرائط بالمظهر نفسه الذي تظهر به الخرائط في تطبيق خرائط Google المتوافق مع iOS، وتوفّر حزمة تطوير البرامج (SDK) العديد من الميزات نفسها.

بالإضافة إلى وظائف ربط البيانات، تتيح واجهة برمجة التطبيقات أيضًا مجموعة من التفاعلات التي تتوافق مع نموذج واجهة مستخدم iOS. على سبيل المثال، يمكنك إعداد التفاعلات مع الخريطة من خلال تحديد المستجيبين الذين يتفاعلون مع إجراءات تفاعلية من المستخدم، مثل النقر والنقر المزدوج.

الفئة الرئيسية عند العمل مع عنصر خريطة هي الفئة GMSMapView. تعالج الإضافة "GMSMapView" العمليات التالية تلقائيًا:

  • جارٍ الربط بخدمة "خرائط Google".
  • جارٍ تنزيل مربّعات الخريطة.
  • عرض المربّعات على شاشة الجهاز
  • عرض عناصر تحكّم مختلفة، مثل التحريك والتكبير/التصغير
  • الاستجابة لإيماءات التحريك والتكبير/التصغير من خلال تحريك الخريطة وتكبيرها أو تصغيرها
    • الاستجابة لإيماءات الإصبعين من خلال إمالة زاوية عرض الخريطة

بالإضافة إلى هذه العمليات التلقائية، يمكنك التحكّم في سلوك الخريطة ومظهرها من خلال السمات والطرق التي تعرضها الفئة GMSMapView. استخدِم GMSMapView لإضافة وإزالة محدّدات الموقع والتراكبات الأرضية والخطوط المتعدّدة، وتغيير نوع الخريطة المعروضة، والتحكّم في ما يتم عرضه على الخريطة من خلال الفئة GMSCameraPosition.

إنشاء خرائط باستخدام SwiftUI

توفّر SwiftUI طريقة إضافية لإنشاء واجهة مستخدم باستخدام نهج تعريفي. أنت تخبر SwiftUI كيف تريد أن تبدو طريقة العرض الخاصة بك مع جميع الحالات المختلفة لها، ويقوم النظام بالباقي. يتولّى SwiftUI تحديث العرض كلما تغيّرت الحالة الأساسية بسبب حدث أو إجراء من المستخدم.

تم إنشاء حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" للتطبيقات المتوافقة مع iOS استنادًا إلى UIKit، وهي لا توفّر عرضًا متوافقًا مع SwiftUI. تتطلّب إضافة الخرائط في SwiftUI الالتزام ببروتوكول UIViewRepresentable أو UIViewControllerRepresentable. لمزيد من المعلومات، يمكنك الاطّلاع على الدرس التطبيقي حول الترميز إضافة خريطة إلى تطبيق iOS باستخدام SwiftUI.

إضافة خريطة

الخطوات الأساسية لإضافة خريطة هي:

  1. للحصول على حزمة تطوير البرامج (SDK) ومفتاح واجهة برمجة التطبيقات وإضافة إطارات العمل المطلوبة، اتّبِع الخطوات الواردة في:

    1. الإعداد في وحدة تحكّم Google Cloud

    2. استخدام مفتاح واجهة برمجة التطبيقات

    3. إعداد مشروع Xcode

    4. في AppDelegate، قدِّم مفتاح واجهة برمجة التطبيقات إلى طريقة الفئة provideAPIKey: في GMSServices.

    5. أنشِئ ViewController أو عدِّله. إذا تم عرض الخريطة عندما تصبح وحدة التحكّم في العرض هذه مرئية، تأكَّد من إنشائها ضمن طريقة viewDidLoad.

    6. عند إعداد عرض الخريطة، اضبط خيارات الإعداد باستخدام GMSMapViewOptions. تشمل المواقع الإلكترونية frame أو camera أو mapID أو backgroundColor أو screen.

    7. اضبط سمة map options camera باستخدام عنصر GMSCameraPosition. يحدّد هذا الإعداد مركز الخريطة ومستوى التكبير.

    8. أنشئ فئة GMSMapView واستخدِمها باستخدام الإجراء GMSMapView options:. إذا كان سيتم استخدام هذه الخريطة كطريقة العرض الوحيدة لوحدة التحكّم في العرض، يمكن استخدام القيمة التلقائية CGRectZero لخيار الخريطة frame كطريقة العرض frame، حيث يتم تغيير حجم الخريطة تلقائيًا.

    9. اضبط الكائن GMSMapView كعرض لوحدة التحكّم في العرض. على سبيل المثال: self.view = mapView;.

يضيف المثال أدناه خريطة إلى تطبيق، وتتوسّط هذه الخريطة وسط مدينة سنغافورة.

Swift

import GoogleMaps

class MapObjects : UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    let options = GMSMapViewOptions()
    options.camera = GMSCameraPosition(latitude: 1.285, longitude: 103.848, zoom: 12)
    options.frame = self.view.bounds;

    let mapView = GMSMapView(options:options)
    self.view = mapView
  }
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = [GMSCameraPosition cameraWithLatitude:1.285
                                                        longitude:103.848
                                                             zoom:12];
  options.frame = self.view.bounds;

  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  self.view = mapView;
}

بعد اتّباع هذه الخطوات، يمكنك ضبط عنصر GMSMapView بشكل أكبر.

الخطوات التالية

بعد إكمال هذه الخطوات، يمكنك ضبط إعدادات الخريطة.