إضافة خريطة

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

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

مقدمة

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

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

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

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

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

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

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

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

إضافة خريطة

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

  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 العنصر بشكلٍ أكبر.

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

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