إضافة خريطة إلى تطبيق iOS (الهدف C)

1. قبل البدء

تجريدي

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

العناصر التي سيتم إنشاؤها

في هذا الدرس التطبيقي حول الترميز، ستنشئ تطبيقًا لنظام التشغيل iOS ينفّذ ما يلي:

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

ما ستتعرَّف عليه

• بدء استخدام "منصة خرائط Google"
• تحميل حزمة تطوير البرامج (SDK) لخدمة "خرائط Google" لنظام التشغيل iOS وحزمة تطوير البرامج (SDK) لتطبيق "خرائط Google" لمنصّة خدمات iOS
• جارٍ تحميل خريطة
• استخدام العلامات والعلامات المخصصة وتجميع العلامات
• العمل مع حزمة تطوير البرامج (SDK) لتطبيق "خرائط Google" لنظام التشغيل iOS لتوفير تفاعل المستخدم
• التحكم في الخريطة آليًا
• الرسم على الخريطة

المتطلّبات الأساسية

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

منتجات "منصة خرائط Google" المطلوبة

في هذا الدرس التطبيقي حول الترميز، ستستخدم المنتجات التالية على "منصة خرائط Google":

• حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" للتطبيقات المتوافقة مع iOS
• حزمة تطوير البرامج (SDK) لتطبيق "خرائط Google" لمكتبة iOS Utility

بدء استخدام "منصة خرائط Google"

إذا لم يسبق لك استخدام "منصة خرائط Google"، يمكنك اتّباع دليل بدء استخدام "منصة خرائط Google" أو مشاهدة "البدء في استخدام قائمة تشغيل منصة خرائط Google" لإكمال الخطوات التالية:

1. أنشئ حساب فوترة.
2. أنشئ مشروعًا.
3. فعِّل واجهات برمجة تطبيقات ومنصة SDK لمنصة "خرائط Google" (المُدرَجة في القسم السابق).
4. أنشئ مفتاح واجهة برمجة تطبيقات.

ملاحظة: عليك تسجيل الدخول إلى حساب حالي على Google أو إنشاء حساب جديد كجزء من عملية الاشتراك.

متطلبات أخرى لهذا الدرس التطبيقي حول الترميز

لإكمال هذا الدرس التطبيقي حول الترميز، ستحتاج إلى الحسابات والخدمات والأدوات التالية:

• حساب Google Cloud Platform تم تفعيل الفوترة به
• مفتاح واجهة برمجة تطبيقات "منصة خرائط Google" مع تفعيل "SDK للخرائط" لنظام التشغيل iOS
• المعرفة الأساسية بالهدف-ج
• Xcode 12.0 مع SDK SDK الإصدار 12.0 أو أحدث

2. الإعداد

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

إعداد "منصة خرائط Google"

إذا لم يكن لديك حساب على Google Cloud Platform ومشروع تم تفعيل الفوترة فيه، يُرجى الاطّلاع على دليل بدء استخدام "منصة خرائط Google" لإنشاء حساب فوترة ومشروع.

1. في Cloud Console، انقر على القائمة المنسدلة للمشروع واختَر المشروع الذي تريد استخدامه لهذا الدرس التطبيقي.

2. فعِّل واجهات برمجة تطبيقات ومنصة SDK لمنصة "خرائط Google" المطلوبة لهذا الدرس التطبيقي في Google Cloud Marketplace. ولإجراء ذلك، اتّبِع الخطوات الواردة في هذا الفيديو أو هذه المستندات.
3. يمكنك إنشاء مفتاح واجهة برمجة تطبيقات في صفحة بيانات الاعتماد في Cloud Console. يمكنك اتّباع الخطوات الواردة في هذا الفيديو أو هذه المستندات. تتطلب جميع الطلبات إلى "منصة خرائط Google" مفتاح واجهة برمجة تطبيقات.

إعداد نموذج Project Starter

قبل بدء هذا الدرس التطبيقي حول الترميز، نفِّذ ما يلي لتنزيل نموذج مشروع إجراء التفعيل بالإضافة إلى رمز الحلّ الكامل:

1. نزِّل دليل GitHub أو استخدِمه على هذا الدرس التطبيقي على https://github.com/googlecodelabs/maps-platform-101-objc.

يقع مشروع StarterApp في الدليل /starter ويشمل بنية الملف الأساسية التي ستحتاج إليها لإكمال الدرس التطبيقي حول الترميز. ستجد كل ما تحتاج إليه للعمل في دليل /starter/StarterApp.

إذا كنت تريد عرض رمز الحل بالكامل، يمكنك إكمال خطوات الإعداد أعلاه وعرض الحل في دليل /solution/SolutionApp.

3- تثبيت "حزمة تطوير البرامج (SDK)" لخدمة "خرائط Google" لنظام التشغيل iOS

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

1. أضِف حزمة تطوير البرامج (SDK) لخدمة "خرائط Google" لنظام التشغيل iOS وحزمة تطوير البرامج (SDK) لخدمة "خرائط Google" لنظام التشغيل iOS Utility إلى Podfile.

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

للبدء، في Xcode (أو محرر النصوص المفضّل لديك)، افتح Pods > Podfile وعدِّل الملف لتضمين حِزم تطوير البرامج (SDK) لتطبيق "خرائط Google" لنظام التشغيل iOS وتبعيات مكتبة الأدوات المساعدة ضمن use_frameworks!:

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'

2. ثبِّت تطبيق حزمة تطوير البرامج (SDK) لخدمة "خرائط Google" لنظام التشغيل iOS وحزمة تطوير البرامج (SDK) لخدمة "خرائط Google" لنظام التشغيل iOS للمكتبة.

لتثبيت التبعيات، شغِّل pod install في الدليل /starter من سطر الأوامر. سينزّل Cocoapods تلقائيًا الارتباطات، وسيتم إنشاء StarterApp.xcworkspace. 3- بعد تثبيت العناصر التابعة لك، افتح StarterApp.xcworkspace في Xcode، ثم شغِّل التطبيق في محاكي iPhone من خلال الضغط على Command+R. إذا تم إعداد كل شيء بشكل صحيح، سيتم تشغيل المحاكي وعرض شاشة سوداء. لا داعي للقلق، فلم يتم إنشاء أي شيء بعد، لذلك يعد هذا أمرًا متوقعًا. 4. استورِد حزمة تطوير البرامج (SDK) في AppDelegate.h.

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

@import GoogleMaps;

5. أسفل بيان استيراد حزمة تطوير البرامج (SDK) لنظام التشغيل iOS، يُرجى توضيح ثابت NSString بالقيمة التي تم ضبطها على مفتاح واجهة برمجة التطبيقات:

static NSString *const kMapsAPIKey = @"YOUR API KEY";

6. تمرير مفتاح واجهة برمجة التطبيقات إلى حزمة تطوير البرامج (SDK) لنظام التشغيل iOS من خلال الاتصال بـ provideAPIKey في GMSServices في application: didFinishLaunchingWithOptions:

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}

من المفترض أن يظهر ملف AppDelegate.m المحدّث الآن على النحو التالي:

#import "AppDelegate.h"
@import GoogleMaps;

static NSString *const kMapsAPIKey = @"YOUR API KEY";

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}
@end

يجب أن يظهر Podfile على النحو التالي:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '11.0'

target 'StarterApp' do
  use_frameworks!

pod 'GoogleMaps', '5.1.0.0'
pod 'Google-Maps-iOS-Utils', '3.4.0'

end

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

4. عرض خريطة

حان وقت عرض خريطتك الأولى.

ويُعد الجزء GMSMapView من الجزء الأكثر استخدامًا في SDK للخرائط لنظام التشغيل iOS، والذي يوفر العديد من الطرق التي تتيح لك إنشاء مثيلات الخرائط ومعالجتها. إليك كيفية إجراء ذلك.

1. فتح ViewController.m

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

@import GoogleMaps;

3. تحديد متغيّر مثيل ViewController لتخزين GMSMapView

يُعدّ مثيل GMSMapView هو العنصر الرئيسي الذي ستعمل معه من خلال هذا الدرس التطبيقي، وستشير إليه وتنفّذه من خلال طرق مراحل نشاط وحدات العرض المختلفة. لتوفيره، يجب تعديل تنفيذ ViewController للإعلان عن متغيّر مثيل لتخزينه:

@implementation ViewController {
  GMSMapView *_mapView;
}

4. في loadView، أنشئ مثيلاً لـ GMSCameraPosition.

تحدد الخاصية GMSCameraPosition مكان توسيط الخريطة ومستوى التكبير/التصغير الذي سيتم عرضه. يستدعي هذا الرمز الطريقة cameraWithLatitude:longitude:zoom: لتوسيط الخريطة في سيدني، بأستراليا، وخط عرض -33.86 وخط طول 151.20، مع مستوى تكبير/تصغير 12:

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];

5. في loadView، يمكنك إنشاء مثيل GMSMapView لإعادة إنشاء الخريطة.

لإنشاء مثيل خريطة جديد، اتصل بالرقم mapWithFrame:camera:. لاحِظ كيف يتم ضبط الإطار على CGRectZero، وهو متغيّر عمومي من مكتبة CGGeometry على نظام التشغيل iOS ويحدّد إطارًا بعرض 0 أو 0 ارتفاعًا في الموضع (0,0) داخل وحدة التحكّم بالملف الشخصي. تم ضبط الكاميرا على موضع الكاميرا الذي أنشأته للتو.

لعرض الخريطة، عليك بعد ذلك ضبط العرض الجذري لوحدة التحكُّم في العرض على _mapview، ما يجعل الخريطة تُعرض بملء الشاشة.

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;

6. ضبط GMSMapViewDelegate على وحدة التحكّم بالملف الشخصي

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

أولاً، يجب تحديث واجهة ViewController لتتوافق مع بروتوكول GMSMapViewDelegate:

@interface ViewController ()<GMSMapViewDelegate>

بعد ذلك، أضِف ما يلي لضبط GMSMapViewDelegate على ViewController.

_mapView.delegate = self;

أعِد تحميل التطبيق الآن في محاكي iOS (Command+R)، وستظهر الخريطة!

خلاصة القول، أنشأت في هذه الخطوة مثالاً للرمز GMSMapView لعرض خريطة تتمركز في مدينة سيدني بأستراليا.

من المفترض أن يظهر ملف ViewController.m على النحو التالي:

#import "ViewController.h"
#import "LocationGenerator.h"
@import GoogleMaps;

@interface ViewController ()<GMSMapViewDelegate>
@end

@implementation ViewController {
  GMSMapView *_mapView;
}

- (void)loadView {
  [super loadView];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;
  _mapView.delegate = self;
}

5. تصميم الخرائط المستنِد إلى السحابة الإلكترونية (اختياري)

يمكنك تخصيص نمط الخريطة باستخدام نمط الخريطة المستنِدة إلى السحابة الإلكترونية.

إنشاء رقم تعريف للخريطة

إذا لم تكن قد أنشأت رقم تعريف خريطة باستخدام نمط خريطة مرتبط به، يمكنك مراجعة دليل أرقام تعريف الخريطة لإكمال الخطوات التالية:

1. إنشاء رقم تعريف للخريطة.
2. ربط رقم تعريف خريطة بنمط الخريطة.

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

إضافة معرّف الخريطة إلى تطبيقك

لاستخدام رقم تعريف الخريطة الذي أنشأته في الخطوة السابقة، افتح ملف ViewController.m وضمن طريقة loadView، أنشئ كائن GMSMapID وقدّم رقم تعريف الخريطة إليه. بعد ذلك، عدِّل مثيل GMSMapView من خلال تقديم الكائن GMSMapID كمعلَمة.

ViewController.m

- (void)loadView {
    GMSMapID *mapID = [[GMSMapID alloc] initWithIdentifier:@"YOUR_MAP_ID"];
    _mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
    // ...
}

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

6- إضافة علامات إلى الخريطة

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

في هذه الخطوة، ستتعرّف على كيفية استخدام الفئة GMSMarker لوضع العلامات على الخريطة.

تجدر الإشارة إلى أنّه لا يمكن وضع العلامات على الخريطة إلا بعد تحميل الخريطة من الخطوة السابقة في حدث دورة حياة loadView في وحدة التحكّم في العرض، ولذلك ستكمل هذه الخطوات في حدث دورة الحياة في viewDidLoad الذي يتم طلبه بعد تحميل العرض (والخريطة).

1. تعريف كائن CLLocationCoordinate2D

CLLocationCoordinate2D هي بنية توفرها مكتبة CoreLocation لنظام التشغيل iOS، وتحدّد موقعًا جغرافيًا في خط عرض وخط طول محدّدَين. لبدء إنشاء محدّد الموقع الأول، يمكنك تحديد عنصر CLLocationCoordinate2D وضبط خط الطول وخط العرض على وسط الخريطة. يمكن الوصول إلى إحداثيات مركز الخريطة من وضع الخريطة، باستخدام خاصيتي camera.target.latitude وcamera.target.longitude.

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);

2. أنشِئ مثيل GMSMarker.

توفر حزمة تطوير البرامج (SDK) لتطبيق "خرائط Google" لنظام التشغيل iOS الصف GMSMarker. يمثل كل مثيل GMSMarker علامة فردية على الخريطة ويتم إنشاؤه عن طريق استدعاء markerWithPosition: وتمرير رمز CLLocationCoordinate2D لإعلام حزمة تطوير البرامج (SDK) بمكان وضع العلامة على الخريطة.

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];

3. إعداد رمز علامة مخصّصة

محدِّد الدبوس الأحمر التلقائي في "خرائط Google" رائع، لذلك يتم تخصيص خريطتك. لحسن الحظ، استخدام العلامة المخصصة سهل جدًا مع SDK للخرائط لنظام التشغيل iOS. ستلاحظ أن مشروع StarterApp يتضمن صورة باسم "custom_pin.png&#39؛ لك حتى تستخدمها، ولكن يمكنك استخدام أي صورة تريدها.

لضبط العلامة المخصّصة، اضبط الخاصية icon للعلامة على مثيل UIImage.

marker.icon = [UIImage imageNamed:@"custom_pin.png"];

4. عرض محدّد الموقع على الخريطة.

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

marker.map = _mapView;

الآن أعِد تحميل التطبيق وابحث عن الخريطة الأولى باستخدام محدّد موقع!

خلاصة الملخّص، في هذا القسم، أنشأت مثيلاً لصف GMSماركر وطبّقته على وضع الخريطة لعرض محدّد على الخريطة. من المفترض أن يظهر الآن حدث مراحل نشاط مراحل العرض المعدَّلة في ViewController.m على النحو التالي:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
}

7- تفعيل تجميع العلامات

عند استخدام العديد من العلامات أو العلامات القريبة من بعضها البعض، قد تواجه مشكلة المتمثلة في تداخل العلامات أو ازدحامها بشكل كبير، مما يؤدي إلى ترك انطباع سيئ لدى المستخدم. على سبيل المثال، إذا كان هناك محدّدَين قريبَين جدًا من بعضهما البعض، قد ينتهي بك الأمر في موقف مثل ما يلي:

وهنا يأتي دور تجميع العلامات. ميزة "تجميع العلامات" هي ميزة أخرى يتم تنفيذها بشكل شائع، وهي تجمع العلامات القريبة في رمز واحد يتغير استنادًا إلى مستوى التكبير أو التصغير، على النحو التالي:

تقسِّم خوارزمية تجميع العلامات المنطقة المرئية من الخريطة إلى شبكة، ثم تجمّع الرموز في الخلية نفسها. لحسن الحظ، لا داعي للقلق بشأن أي شيء من هذا النوع، حيث إن فريق منصة خرائط Google أنشأ مكتبة برامج مفتوحة المصدر مفيدة اسمها SDK لإعلانات Google على مكتبة التطبيقات العامة لـ iOS. تتعامل هذه المكتبة مع العديد من العناصر الأخرى، وهي تعالج تلقائيًا تجميع العلامات. يمكنك الاطّلاع على مزيد من المعلومات عن تجميع العلامات في مستندات "منصة خرائط Google"، أو الاطّلاع على مصدر مكتبة أدوات مساعدة iOS على GitHub.

1. إضافة المزيد من العلامات إلى الخريطة.

للاطلاع على تجميع العلامات أثناء العمل، ستحتاج إلى أن يكون لديك الكثير من العلامات على الخريطة. لتسهيل ذلك، يتم توفير أداة إنشاء علامات مناسبة لك في مشروع المبتدئين في LocationGenerator.m.

لإضافة العديد من العلامات إلى الخريطة كما تريد، يمكنك ببساطة استدعاء generateMarkersNear:count: في دورة حياة وحدة التحكم في العرض viewDidLoad أسفل الرمز من الخطوة السابقة. تنشئ الطريقة عدد العلامات المحددة في count في مواقع عشوائية حول الإحداثيات المحددة في عنصر CLLocationCoordinate2D. في هذه الحالة، يمكنك فقط تمرير المتغير mapCenter الذي أنشأته سابقًا. يتم عرض العلامات في NSArray.

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

2. استيراد حزمة تطوير البرامج (SDK) لتطبيق "خرائط Google" لمكتب خدمات iOS.

لإضافة مكتبة أدوات iOS في "خرائط Google" كاعتمادية على مشروعك، أضِف ما يلي إلى قائمة التبعيات في أعلى ViewController.m:

@import GoogleMapsUtils;

3. اضبط أداة تجميع العلامات.

لاستخدام أداة تجميع العلامات، يجب تقديم ثلاثة عناصر لضبط آلية العمل: خوارزمية تجميع ومنشئ رموز وعارض. تحدد الخوارزمية سلوك كيفية تجميع العلامات، مثل المسافة بين العلامات المطلوب تضمينها في المجموعة نفسها. يوفر منشئ الرموز رموز المجموعات لاستخدامها في مستويات تكبير/تصغير مختلفة. يتعامل العارض مع العرض الفعلي لرموز المجموعات على الخريطة.

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

id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];

id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];

4. أنشِئ مثيل GMUClusterManager.

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

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

بعد ذلك، أنشئ مثيل GMUClusterManager في حدث مراحل نشاط viewDidLoad:

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

5. إضافة العلامات وتشغيل مجمِّع العلامات.

الآن بعد أن تم إعداد مثيل أداة تصنيف العلامات، ما عليك سوى تمرير مدير المجموعة إلى مصفوفة العلامات التي سيتم تجميعها من خلال استدعاء addItems: ثم تشغيل المجموعة خلال استدعاء cluster.

[_clusterManager addItems:markerArray];
[_clusterManager cluster];

أعد تحميل تطبيقك، ومن المفترض أن يظهر لك الآن عدد كبير من العلامات التي تم تجميعها بشكل سليم. واصِل اللعب مع مستويات تكبير مختلفة، عن طريق التكبير والتصغير على الخريطة.

خلاصة القول، في هذه الخطوة، هيأتَ مثيلًا لأداة تجميع العلامات من حزمة تطوير البرامج (SDK) لتطبيق "خرائط Google" لمكتب خدمات iOS، ثم استخدمتها لتجميع 100 علامة على الخريطة. من المفترض أن يظهر الآن حدث مراحل نشاط viewDidLoad في ViewController.m على النحو التالي:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude,
                                                                _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
  NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

  id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
  id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
  id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  _clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

  [_clusterManager addItems:markerArray];
  [_clusterManager cluster];
}

8- إضافة تفاعل المستخدم

لديك الآن خريطة رائعة تعرض العلامات وتستخدم تجميع العلامات. في هذه الخطوة، ستضيف بعض المعالجة الإضافية لتفاعلات المستخدم باستخدام GMSMapViewDelegate، والتي حددتها على وحدة التحكُّم في العرض سابقًا، لتحسين تجربة المستخدِم لخريطتك.

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

في هذه الخطوة، سيكون عليك ضبط عرض الخريطة آليًا على أي علامة نقر عليها المستخدم.

1. تنفيذ المستمع على النقر على محدّد الموقع.

ويتم استدعاء mapView:didTapMarker في أي وقت ينقر فيه المستخدم على إحدى العلامات التي أنشأتها من قبل، بالإضافة إلى أي وقت ينقر فيه المستخدم على مجموعة من العلامات (يتم تنفيذ مجموعات العلامات داخليًا كمثال على GMSMarker).

لتنفيذ أداة معالجة الحدث، ابدأ بدهاها في أسفل ViewController.m قبل عبارة end.

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

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {

  return NO;
}

2. يمكنك معالجة حدث النقر وتحريك الكاميرا لتصغير الخريطة عند النقر على محدِّد موقع أو مجموعة علامات.

عند الاتصال، يمرّر mapView:didTapMarker مثيل GMSMarker الذي تم النقر عليه، ما يتيح لك معالجة ذلك في الرمز. ويمكنك استخدام هذا المثيل في إعادة ضبط الخريطة من خلال استدعاء الدالة animateToLocation: في وضع الخريطة من داخل معالج الحدث، وتمريره موضع مثيل العلامة، الذي يتوفّر في السمة position.

[_mapView animateToLocation:marker.position];

3. تكبير مجموعة علامات عند النقر عليها

يتمثل نمط المستخدم الشائع في تكبير مجموعات العلامات عند النقر عليها. ويسمح ذلك للمستخدمين بعرض العلامات المجمّعة، حيث سيتم توسيع المجموعة عند مستويات تكبير/تصغير أقل.

كما أشرنا سلفًا، رمز مجموعة العلامات هو في الواقع تنفيذ GMSMarker مع رمز مخصص. كيف يمكنك معرفة ما إذا تم النقر على علامة أو مجموعة علامات؟ عندما ينشئ مدير أداة تجميع العلامات رمز مجموعة جديد، ينفِّذ مثيل GMSMarker للتوافق مع بروتوكول يُسمى GMUCluster.. ويمكنك استخدام شرطي للتحقق مما إذا كانت العلامة التي يتم تمريرها إلى معالج الأحداث تتوافق مع هذا البروتوكول أم لا.

بعد أن تعرف بشكل آلي أنه تم النقر على مجموعة، يمكنك عندئذٍ الاتصال بـ animateToZoom: على مثيل عرض الخريطة وضبط التكبير/التصغير على مستوى التكبير أو التصغير الحالي بالإضافة إلى واحد. يتوفّر مستوى التكبير أو التصغير الحالي في مثيل عرض الخريطة في السمة camera.zoom.

لاحِظ أيضًا كيف تؤدي الرمز أدناه إلى عرض YES. يؤدي ذلك إلى إعلام معالج الحدث بأنك أكملت معالجة الحدث ولم تنفّذ أي رمز آخر في المعالج. وأحد أسباب ذلك هو منع الكائن GMSMarker الأساسي من تنفيذ باقي سلوكياته التلقائية، مثل عرض نافذة معلومات، والتي لن يكون لها أي فائدة في حالة النقر على رمز مجموعة.

if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
}

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

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

ستظهر طريقة mapView:didTapMarker على النحو التالي:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  return NO;
}

9- الرسم على الخريطة

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

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

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

1. أضِف متغيّر مثيل _circ إلى تنفيذ ViewController.

سيتم استخدام هذا المتغيّر لحفظ أحدث دائرة مرسومة، بحيث يمكن إتلافها قبل رسم رسم آخر. بعد ذلك، لن يكون ذلك مفيدًا جدًا للمستخدم وسيبدو سيئًا جدًا إذا كانت كل علامة منقر عليها مرسومة بدائرة حولها.

لإجراء ذلك، عدِّل عملية تنفيذ ViewController على النحو التالي:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}

2. ارسم الدائرة عند النقر على العلامة.

في أسفل طريقة mapView:didTapMarker، أضِف الرمز التالي لإنشاء نسخة افتراضية من صف GMSCircle لحزمة تطوير البرامج (SDK) لنظام التشغيل iOS لرسم دائرة جديدة بزاوية 800 متر عن طريق استدعاء circleWithPosition:radius: وتمريره موضع العلامة التي تم النقر عليها، تمامًا كما فعلت سابقًا عند تكبير الخريطة.

_circ = [GMSCircle circleWithPosition:marker.position radius:800];

3. حدد نمط الدائرة.

بشكل تلقائي، يرسم GMSCircle دائرة برسم أسود وملء شفاف. ويعمل هذا من أجل عرض النطاق الجغرافي، ولكنه لا يبدو جيدًا جدًا، كما يصعب رؤيته قليلاً. بعد ذلك، يمكنك إضافة لون ملء إلى الدائرة لتحسين التصميم من خلال تخصيص UIColor للسمة fillColor للدائرة. سيضيف الرمز التالي ملءًا رماديًا بشفافية 50%:

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];

4. عرض الدائرة على الخريطة.

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

_circ.map = _mapView;

5. إزالة أي دوائر معروضة سابقًا

كما ذكرنا سابقًا، لن يكون من المفيد جدًا تجربة المستخدم عند إضافة دوائر إلى الخريطة. لإزالة الدائرة المعروضة من خلال حدث نقرة سابق، اضبط الخاصية map على _circ في nil أعلى mapView:didTapMarker.

_circ.map = nil;

إعادة تحميل التطبيق والنقر على محدّد موقع. من المفترض أن تظهر دائرة جديدة مرسومة عند النقر على أي علامة وإزالة أي دائرة معروضة في وقت سابق.

خلاصة القول، لقد استخدمت في هذه الخطوة صف GMSCircle لعرض دائرة كلما تم النقر على محدّد موقع.

من المفترض أن تبدو طريقة mapView:didTapMarker على النحو التالي:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  _circ.map = nil;
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  _circ = [GMSCircle circleWithPosition:marker.position radius:800];
  _circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  _circ.map = _mapView;
  return NO;
}

10- تهانينا

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

وللاطّلاع على الرمز الكامل، اطّلِع على المشروع المكتمل في دليل /solution.

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

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

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

لمواصلة التعرّف على المزيد من الطرق التي يمكنك من خلالها العمل مع "منصة خرائط Google" على الويب، اطّلِع على الروابط التالية:

• مستندات SDk للخرائط لتطبيق iOS
• قناة YouTube على "منصة خرائط Google"
• الدروس التطبيقية حول ترميز "منصة خرائط Google"
• مشاريع مفتوحة المصدر في "منصة خرائط Google" على GitHub