إضافة خريطة

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

يتم تمثيل الخرائط في واجهة برمجة التطبيقات بواسطة الفئة GMSMapView، وهي فئة فرعية من UIView. تعتبر الخريطة هي أهم كائن في "SDK للخرائط" لنظام التشغيل 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 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.

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

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