إضافة خريطة

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

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

المقدمة

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

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

الفئة الرئيسية عند العمل مع كائن "الخريطة" هي الفئة GMSMapView. يعالج GMSMapView العمليات التالية تلقائيًا:

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

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

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

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

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

إضافة خريطة

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

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

    1. الإعداد في Google Cloud Console

    2. استخدام مفتاح واجهة برمجة التطبيقات

    3. إعداد مشروع Xcode

  2. في AppDelegate، أدخِل مفتاح واجهة برمجة التطبيقات إلى طريقة الفئة provideAPIKey: في GMSServices.

  3. إنشاء ViewController أو تعديلها إذا سيتم عرض الخريطة عندما تصبح وحدة التحكّم في العرض هذه مرئية، احرص على إنشائها بطريقة loadView.

    1. يمكنك إنشاء كائن GMSCameraPosition لتحديد مركز الخريطة ومستوى تكبيرها/تصغيرها. عند إنشاء مثيل لكائن GMSMapView، يجب تمرير الكائن GMSCameraPosition كمَعلمة مطلوبة.

    2. يمكنك إنشاء فئة GMSMapView وإنشاء مثيل لها باستخدام طريقة GMSMapView mapWithFrame:. في حال استخدام هذه الخريطة للعرض الوحيد للمسؤول عن التحكم في العرض، يمكن استخدام CGRectZero كإطار للخريطة، وسيتم تغيير حجم الخريطة تلقائيًا.

    3. اضبط كائن GMSMapView كعرض لوحدة التحكّم في الملف الشخصي، مثل self.view = mapView;.

يضيف المثال أدناه خريطة، تتمركز في وسط مدينة سنغافورة، إلى أحد التطبيقات.

Swift

import GoogleMaps

class MapObjects : UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    let camera = GMSCameraPosition(latitude: 1.285, longitude: 103.848, zoom: 12)
    let mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
  }
}
      

Objective-C

#import "MapObjects.h"
@import GoogleMaps;

@implementation MapObjects

- (void)viewDidLoad {
  [super viewDidLoad];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:1.285
                                                          longitude:103.848
                                                               zoom:12];
  GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = mapView;
}

@end
      

بعد اتّباع هذه الخطوات، يمكنك ضبط إعدادات كائن GMSMapView بشكل أكبر.

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

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