إضافة خريطة

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

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

مقدمة

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

بالإضافة إلى وظيفة الربط بالخرائط، تتيح واجهة برمجة التطبيقات أيضًا مجموعة من التفاعلات المتوافقة مع نموذج واجهة المستخدم في 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 العنصر بشكلٍ أكبر.

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

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