إضافة خريطة

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

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

يتم تمثيل الخرائط في واجهة برمجة التطبيقات من خلال الفئة 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. لمزيد من المعلومات، يمكنك الاطّلاع على الدرس التطبيقي حول الترميز حول إضافة خريطة إلى تطبيق iOS باستخدام SwiftUI.

إضافة خريطة

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

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

   1. الإعداد في وحدة تحكّم Google Cloud

   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 بشكلٍ إضافي.

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

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