تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

1. قبل البدء

يعلّمك هذا الدرس التطبيقي حول الترميز كيفية بدء استخدام "منصة خرائط Google" لإنشاء تطبيقات iOS في Swift. ستنشئ تطبيق iOS ينفّذ ما يلي:

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

خريطة تتضمّن علامات في تطبيق iOS

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

معرفة أساسية بلغة Swift وعملية تطوير تطبيقات iOS

الإجراءات التي ستنفذّها

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

المتطلبات

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

الإصدار 12.0 من Xcode أو إصدار أحدث مع حزمة تطوير برامج (SDK) مستهدَفة بالإصدار 12.0 أو إصدار أحدث
تم تثبيت Cocoapods.
حساب على Google Cloud Platform مع تفعيل الفوترة (راجِع الخطوة التالية)
مشروع في Cloud Console تم تفعيل حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لتطبيقات iOS فيه (راجِع الخطوة التالية)

2. طريقة الإعداد

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

إعداد Google Maps Platform

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

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

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

البدء السريع

لمساعدتك في البدء بأسرع ما يمكن، إليك بعض الرموز البرمجية الأولية لمساعدتك في متابعة هذا الدرس العملي.

استنسِخ المستودع إذا كان لديك git مثبَّتًا.

git clone https://github.com/googlemaps/codelab-maps-platform-101-swift.git

بدلاً من ذلك، انقر على إرسال الرمز لتنزيل رمز المصدر.

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

للاطّلاع على رمز الحل الكامل قيد التشغيل، اعرض الرمز المكتمل في الدليل /solution/SolutionApp.

3- تثبيت حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لأجهزة iOS

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

أضِف حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لتطبيقات iOS ومكتبة أدوات حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لتطبيقات iOS إلى Podfile.

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

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

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

راجِع مستندات الإصدارات الخاصة بحزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لتطبيقات iOS للاطّلاع على أحدث إصدار من الحزمة وإرشادات الصيانة.

يجب أن تبدو Podfile على النحو التالي:

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

target 'StarterApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for StarterApp
  pod 'GoogleMaps', '6.1.0'
  pod 'Google-Maps-iOS-Utils', '3.4.0'
end

ثبِّت حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لتطبيقات iOS وحزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لتطبيقات iOS Utility Library.

لتثبيت التبعيات، شغِّل pod install في الدليل /starter من سطر الأوامر. تنزّل Cocoapods التبعيات تلقائيًا وتنشئ StarterApp.xcworkspace.

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

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

import GoogleMaps

مرِّر مفتاح واجهة برمجة التطبيقات إلى حزمة تطوير البرامج (SDK) لنظام التشغيل iOS من خلال استدعاء provideAPIKey في GMSServices في application: didFinishLaunchingWithOptions:

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

يجب أن يظهر ملف AppDelegate.swift المعدَّل الآن على النحو التالي:

import UIKit
import GoogleMaps

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

}

استبدِل YOUR_API_KEY بمفتاح واجهة برمجة التطبيقات الذي أنشأته في Cloud Console.

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

4. عرض خريطة

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

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

فتح "ViewController.swift"

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

استورِد حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لأجهزة iOS من خلال إضافة ما يلي في أعلى الملف:

import GoogleMaps

عرِّف متغيّر مثيل ViewController لتخزين GMSMapView.

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

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}

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

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

let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 12)

في loadView، أنشئ مثيلاً من GMSMapView لإنشاء الخريطة.

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

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

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView

اضبط GMSMapViewDelegate على وحدة التحكّم في العرض.

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

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

class ViewController: UIViewController, GMSMapViewDelegate

بعد ذلك، أضِف السطر التالي في الدالة loadView لضبط GMSMapViewDelegate على ViewController.

    mapView.delegate = self

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

تطبيق iOS يعرض خريطة Google

الشكل 1: تطبيق iOS يعرض خريطة Google.

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

يجب أن يظهر ملف ViewController.swift الآن على النحو التالي:

import UIKit
import GoogleMaps

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
  }

}

5- تحديد نمط الخريطة (اختياري)

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

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

إذا لم يسبق لك إنشاء معرّف خريطة مرتبط بنمط خريطة، يمكنك الاطّلاع على دليل معرّفات الخرائط لإكمال الخطوات التالية:

أنشئ معرّف خريطة.
ربط رقم تعريف خريطة بنمط خريطة

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

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

ViewController.swift

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)
    let mapID = GMSMapID(identifier: "YOUR_MAP_ID")

    mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

بعد إكمال هذه الخطوات، شغِّل التطبيق للاطّلاع على خريطتك بالنمط الذي اخترته.

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

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

خريطة تتضمّن علامات حمراء

الشكل 2. خريطة تتضمّن علامات حمراء

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

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

حدِّد عنصر CLLocationCoordinate2D.

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

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)

أنشئ مثيلاً من GMSMarker.

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

    let marker = GMSMarker(position: mapCenter)

ضبط رمز مخصّص للعلامة

إنّ محدّد الموقع التلقائي باللون الأحمر في "خرائط Google" هو خيار رائع، ولكن تخصيص خريطتك هو خيار رائع أيضًا. لحسن الحظ، يمكن استخدام علامة مخصّصة بسهولة من خلال حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لأجهزة iOS. يُرجى العِلم أنّ مشروع StarterApp يتضمّن صورة باسم "custom_pin.png" يمكنك استخدامها، ولكن يمكنك استخدام أي صورة تريدها.

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

    marker.icon = UIImage(named: "custom_pin.png")

عرض العلامة على الخريطة

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

    marker.map = mapView

أعِد الآن تحميل التطبيق وشاهِد خريطتك الأولى التي تتضمّن علامة كما هو موضّح في الشكل 3.

تطبيق iOS يعرض "خريطة Google" مع علامة حمراء في المنتصف

الشكل 3: تطبيق iOS يعرض "خرائط Google" مع علامة حمراء في المنتصف.

للتلخيص، أنشأت في هذا القسم مثيلاً لفئة GMSMarker وطبّقته على عرض الخريطة لعرض علامة على الخريطة. من المفترض أن يبدو حدث دورة الحياة viewDidLoad المعدَّل في ViewController.swift على النحو التالي:

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView
  }

7. تفعيل ميزة "تجميع العلامات"

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

علامتان متقاربتان جدًا

الشكل 4 علامتان متقاربتان جدًا

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

مثال على علامات مجمّعة في رمز واحد

الشكل 5. مثال على علامات مجمّعة في رمز واحد

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

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

للاطّلاع على ميزة تجميع العلامات في الخريطة، يجب أن يكون لديك العديد من العلامات على الخريطة. لتسهيل ذلك، استخدِم أداة إنشاء العلامات المتوفّرة في مشروع التطبيق التجريبي في MarkerGenerator.swift.

لإضافة عدد محدّد من العلامات إلى الخريطة، استدعِ الدالة MarkerGenerator(near:count:).markerArray في دورة حياة viewDidLoad لوحدة التحكّم في العرض أسفل الرمز من الخطوة السابقة. تنشئ الطريقة عدد العلامات المحدّدة في count في مواقع جغرافية عشوائية حول الإحداثيات المحدّدة في العنصر CLLocationCoordinate2D. في هذه الحالة، يمكنك تمرير المتغيّر mapCenter الذي أنشأته سابقًا. يتم عرض العلامات في [GMSMarker].

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray

يمكنك اختبار شكل هذا العدد من العلامات من خلال إضافة هذه الأسطر بعد تعريف markerArray، ثم تشغيل التطبيق. احرص على وضع هذه الأسطر في تعليق قبل الانتقال إلى الخطوات التالية التي تستخدم أداة Marker Clusterer لإدارة عرض العلامات بدلاً من ذلك:

    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    for marker in markerArray {
      marker.map = mapView
    }

استورِد مكتبة الأدوات لحزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لتطبيقات iOS.

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

import GoogleMapsUtils

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

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

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

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)

أنشئ مثيلاً من GMUClusterManager.

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

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
}

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

    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

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

بعد إعداد مثيل أداة تجميع العلامات، مرِّر مصفوفة العلامات التي سيتم تجميعها إلى أداة إدارة التجميع من خلال استدعاء add(items:)، ثم شغِّل أداة التجميع من خلال استدعاء cluster.

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()

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

تطبيق iOS يتضمّن خريطة Google وعلامات مجمّعة

الشكل 6: تطبيق iOS يتضمّن "خرائط Google" وعلامات مجمّعة

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

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray
    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    //    for marker in markerArray {
    //      marker.map = mapView
    //    }

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)
    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()
  }

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

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

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

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

نفِّذ أداة معالجة النقر على العلامة.

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

لتنفيذ أداة معالجة الأحداث، ابدأ بإنشاء نسخة فارغة منها في أسفل ViewController.swift قبل قوس الإغلاق المعقوف.

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    return false
  }

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

التعامل مع حدث النقر وتحريك الكاميرا لإعادة توسيط الخريطة عند النقر على علامة أو مجموعة علامات

عندما يتم استدعاء mapView(_:didTap:)، يتم تمرير مثيل GMSMarker الذي تم النقر عليه حتى تتمكّن من التعامل معه في الرمز البرمجي. يمكنك استخدام هذا العنصر لإعادة توسيط الخريطة من خلال استدعاء animate(toLocation:) في عرض الخريطة من داخل معالج الأحداث، وتمرير موضع عنصر العلامة من الخاصية position.

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

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

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

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

بعد معرفة أنّه تم النقر على مجموعة برمجيًا، يمكنك استدعاء animate(toZoom:) في مثيل عرض الخريطة وضبط مستوى التكبير/التصغير على مستوى التكبير/التصغير الحالي بالإضافة إلى مستوى واحد. يتوفّر مستوى التكبير أو التصغير الحالي في عنصر mapView ضِمن السمة camera.zoom.

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

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

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

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

يجب أن تبدو طريقة mapView(_:didTap:) على النحو التالي:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    return false
  }

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

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

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

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

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

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

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

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
  private var circle: GMSCircle? = nil
  ...
}

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

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

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)

اختَر نمط الدائرة.

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

    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)

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

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

    circle?.map = mapView

أزِل أي دوائر تم عرضها سابقًا.

كما ذكرنا سابقًا، لن تكون تجربة المستخدم جيدة إذا واصلنا إضافة دوائر إلى الخريطة. لإزالة الدائرة التي تم إنشاؤها بواسطة حدث نقرة سابق، اضبط السمة map الخاصة بالعنصر circle على nil في أعلى mapView(_:didTap:).

    // Clear previous circles
    circle?.map = nil

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

دائرة مرسومة حول العلامة التي تم النقر عليها

الشكل 7. دائرة مرسومة حول العلامة التي تم النقر عليها

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

يجب أن تبدو طريقة mapView(_:didTap:) على النحو التالي:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Clear previous circles
    circle?.map = nil

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
    circle?.map = mapView
    return false
  }

10. تهانينا

لقد أنشأت بنجاح تطبيق iOS يتضمّن خريطة تفاعلية من Google.

ما تعلّمته

تحميل حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لتطبيقات iOS وإعدادها ومكتبة الأدوات لحزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لتطبيقات iOS
تحميل خريطة
تصميم خريطة
استخدام العلامات والعلامات المخصّصة وتجميع العلامات
نظام الأحداث لتوفير تفاعل المستخدم
التحكّم في كاميرا الخريطة آليًا
الرسم على الخريطة

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

استكشِف maps-sdk-for-ios-samples مستودع GitHub الذي يتضمّن عيّنات وعروضًا توضيحية للحصول على المزيد من الأفكار
يمكنك الاستفادة من المزيد من دروس الترميز التطبيقية حول Swift لإنشاء تطبيقات iOS باستخدام "منصة خرائط Google".
يُرجى مساعدتنا في إنشاء المحتوى الذي تراه الأكثر فائدة من خلال الإجابة عن الاستطلاع التالي:

ما هي جلسات الترميز الأخرى التي تريد المشاركة فيها؟

العرض المرئي للبيانات على الخرائط

مزيد من المعلومات عن تخصيص نمط خرائطي

إنشاء تفاعلات ثلاثية الأبعاد في الخرائط

هل يتعذّر عليك العثور على الدرس العملي الذي يهمّك أكثر؟ يمكنك طلب ذلك من خلال تقديم مشكلة جديدة هنا.

إضافة خريطة إلى تطبيق iOS (Swift) تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.