إضافة خريطة

اختيار النظام الأساسي: 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. لمزيد من المعلومات، يمكنك الاطّلاع على Codelab إضافة خريطة إلى تطبيق iOS باستخدام SwiftUI.

إضافة خريطة

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

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

    1. الإعداد في Google Cloud Console

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

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

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

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

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

    7. اضبط السمة خيارات الخريطة 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 الكائن بشكلٍ أكبر.

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

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