إضافة خريطة

اختَر النظام الأساسي: 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 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:. في حال استخدام هذه الخريطة كطريقة العرض الوحيدة لوحدة التحكم في العرض، يمكن استخدام القيمة التلقائية لخيار الخريطة frame التي تبلغ CGRectZero كعرض 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 بشكل أكبر.

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

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