یک نقشه به برنامه iOS خود اضافه کنید (Swift)

1. قبل از شروع

این کد لبه به شما می آموزد که چگونه از پلتفرم نقشه های گوگل برای ساخت برنامه های iOS در سوئیفت استفاده کنید. شما یک برنامه iOS خواهید ساخت که کارهای زیر را انجام می دهد:

  • Maps SDK برای iOS و Maps SDK for iOS Utility Library را بارگیری می کند.
  • نقشه ای را در مرکز سیدنی استرالیا نمایش می دهد.
  • نشانگرهای سفارشی را برای 100 نقطه در اطراف سیدنی نمایش می دهد.
  • خوشه بندی نشانگر را پیاده سازی می کند.
  • تعامل کاربر را فعال می کند که وقتی روی یک نشانگر ضربه می زند، دوباره مرکز می شود و دایره ای روی نقشه ترسیم می کند.

نقشه با نشانگرها در یک برنامه iOS

پیش نیازها

  • دانش اولیه توسعه Swift و iOS.

کاری که خواهی کرد

  • Maps SDK برای iOS و Google Maps SDK for iOS Utility Library را بارگیری کنید.
  • بارگذاری یک نقشه
  • از نشانگرها، نشانگرهای سفارشی و خوشه بندی نشانگرها استفاده کنید.
  • برای پشتیبانی از تعامل کاربر، با Maps SDK برای سیستم رویداد iOS کار کنید.
  • دوربین نقشه را به صورت برنامه ای کنترل کنید.
  • روی نقشه بکشید.

آنچه شما نیاز دارید

برای تکمیل این کد لبه، به حساب‌ها، خدمات و ابزارهای زیر نیاز دارید:

  • Xcode 12.0 یا بالاتر با هدف SDK 12.0 یا بالاتر.
  • کوکوپود نصب شده است.
  • یک حساب Google Cloud Platform با فعال بودن صورت‌حساب (مرحله بعدی را ببینید).
  • پروژه ای در Cloud Console با Maps SDK برای iOS فعال (مرحله بعدی را ببینید).

2. راه اندازی شوید

برای مرحله فعال سازی زیر، باید Maps SDK را برای iOS فعال کنید.

پلتفرم نقشه های گوگل را راه اندازی کنید

اگر قبلاً یک حساب Google Cloud Platform و پروژه‌ای با صورت‌حساب فعال ندارید، لطفاً راهنمای شروع به کار با Google Maps Platform را برای ایجاد یک حساب صورت‌حساب و یک پروژه ببینید.

  1. در Cloud Console ، روی منوی کشویی پروژه کلیک کنید و پروژه ای را که می خواهید برای این کد لبه استفاده کنید انتخاب کنید.

  1. APIها و SDKهای پلتفرم Google Maps مورد نیاز برای این لبه کد را در Google Cloud Marketplace فعال کنید. برای انجام این کار، مراحل این ویدیو یا این مستند را دنبال کنید.
  2. یک کلید API در صفحه Credentials در Cloud Console ایجاد کنید. می توانید مراحل این ویدئو یا این مستند را دنبال کنید. همه درخواست‌ها به پلتفرم Google Maps به یک کلید API نیاز دارند.

شروع سریع

برای شروع هر چه سریع‌تر، در اینجا چند کد شروع وجود دارد که به شما کمک می‌کند تا این کد را دنبال کنید.

  1. اگر git را نصب کرده اید، مخزن را کلون کنید. 
git clone https://github.com/googlemaps/codelab-maps-platform-101-swift.git

یا روی گزینه Give me the code برای دانلود کد منبع کلیک کنید.

  1. پس از دانلود کد، پروژه StarterApp را در پوشه /starter باز کنید. این پروژه شامل ساختار فایل اصلی است که برای تکمیل کد لبه نیاز دارید. هر چیزی که برای کار با آن نیاز دارید در فهرست /starter/StarterApp قرار دارد.

برای مشاهده کد راه حل کامل در حال اجرا، کد تکمیل شده را در پوشه /solution/SolutionApp مشاهده کنید.

3. Maps SDK را برای iOS نصب کنید

اولین قدم برای استفاده از Maps SDK برای iOS، نصب وابستگی های مورد نیاز است. دو مرحله برای این فرآیند وجود دارد: نصب Maps SDK برای iOS و Maps SDK for iOS Utility Library از مدیر وابستگی Cocoapods و ارائه کلید API خود به SDK.

  1. Maps SDK برای iOS و Maps SDK for iOS Utility Library را به Podfile اضافه کنید.

این کد لبه هم از Maps SDK برای iOS استفاده می‌کند که همه عملکردهای اصلی Google Maps را ارائه می‌کند و هم از Maps iOS Utility Library که ابزارهای مختلفی را برای غنی‌سازی نقشه شما از جمله خوشه‌بندی نشانگرها ارائه می‌دهد.

برای شروع، در Xcode (یا ویرایشگر متن دلخواه خود) Podfile باز کنید و فایل را به‌روزرسانی کنید تا شامل Maps SDK برای iOS و وابستگی‌های Utility Library در زیر نظر # Pods for StarterApp باشد:

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

اسناد Maps SDK برای نسخه‌های iOS را برای آخرین نسخه SDK و راهنمایی برای نگهداری بررسی کنید.

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
  1. برنامه Maps SDK برای iOS و Maps SDK برای iOS Utility Library را نصب کنید.

برای نصب وابستگی ها، pod install در دایرکتوری /starter از خط فرمان اجرا کنید. Cocoapods به طور خودکار وابستگی ها را دانلود می کند و StarterApp.xcworkspace را ایجاد می کند.

  1. پس از نصب وابستگی‌ها، open StarterApp.xcworkspace از پوشه /starter اجرا کنید تا فایل در Xcode باز شود و سپس با فشار دادن Command+R برنامه را در شبیه‌ساز آیفون اجرا کنید. اگر همه چیز به درستی تنظیم شود، شبیه ساز راه اندازی می شود و یک صفحه سیاه نشان می دهد. نگران نباشید، شما هنوز چیزی ساخته اید، بنابراین این مورد انتظار است!
  2. SDK را در AppDelegate.swift وارد کنید.

اکنون که وابستگی های شما نصب شده اند، زمان آن رسیده است که کلید API خود را در SDK ارائه دهید. اولین قدم این است که Maps SDK را برای iOS به عنوان یک وابستگی با قرار دادن موارد زیر در زیر عبارت import UIKit import وارد کنید:

import GoogleMaps
  1. با فراخوانی 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
  }

}

کلید API را که در Cloud Console ایجاد کرده اید، جایگزین YOUR_API_KEY کنید.

اکنون که وابستگی های شما نصب شده و کلید API شما ارائه شده است، آماده شروع تماس با Maps SDK برای iOS هستید.

4. یک نقشه را نمایش دهید

زمان نمایش اولین نقشه شماست!

رایج‌ترین بخش Maps SDK برای iOS کلاس GMSMapView است که بسیاری از روش‌هایی را ارائه می‌کند که به شما امکان می‌دهد نمونه‌های نقشه را ایجاد و دستکاری کنید. در اینجا نحوه انجام این کار آمده است:

  1. ViewController.swift را باز کنید.

اینجاست که بقیه کار را برای این کد لبه انجام خواهید داد. توجه داشته باشید که رویدادهای چرخه حیات loadView و viewDidLoad برای view controller قبلاً برای شما ارسال شده است.

  1. با افزودن این مورد در بالای فایل، Maps SDK را برای iOS وارد کنید: 
import GoogleMaps
  1. یک متغیر نمونه ViewController برای ذخیره GMSMapView اعلام کنید.

نمونه GMSMapView شی اصلی است که در سرتاسر این Codelab با آن کار می‌کنید، و از روش‌های مختلف چرخه حیات کنترل‌کننده View به آن اشاره می‌کنید و روی آن عمل می‌کنید. برای در دسترس قرار دادن آن، پیاده سازی ViewController را به روز کنید تا یک متغیر نمونه برای ذخیره آن اعلام شود:

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}
  1. در loadView ، یک نمونه از GMSCameraPosition ایجاد کنید.

GMSCameraPosition محل قرار گرفتن نقشه در مرکز و سطح بزرگنمایی که نمایش داده می شود را مشخص می کند. این کد روش cameraWithLatitude:longitude:zoom: برای مرکز نقشه در سیدنی، استرالیا، در عرض جغرافیایی 33.86- و طول جغرافیایی 151.20، با سطح زوم 12 نامیده می شود:

let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 12)
  1. در loadView ، یک نمونه از GMSMapView برای نمونه سازی نقشه ایجاد کنید.

برای ایجاد یک نمونه نقشه جدید، با GMSMapView(frame: CGRect, camera: GMSCameraPosition) تماس بگیرید. توجه داشته باشید که چگونه فریم روی CGRect.zero تنظیم می شود، که یک متغیر سراسری از کتابخانه iOS CGGeometry است که یک فریم با عرض 0، ارتفاع 0 را مشخص می کند که در موقعیت (0،0) در داخل کنترلر view قرار دارد. دوربین روی موقعیت دوربینی که شما ایجاد کردید تنظیم شده است.

در مرحله بعد، برای نمایش نقشه، نمای ریشه کنترلر ویو را روی mapView قرار دهید که باعث می شود نقشه تمام صفحه نمایش داده شود. 

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
  1. GMSMapViewDelegate را روی view controller تنظیم کنید.

وقتی اجرا شد، نمای نقشه به شما امکان می‌دهد رویدادهای مربوط به تعاملات کاربر در نمونه GMSMapView را مدیریت کنید، که بعداً به آن نیاز خواهید داشت.

ابتدا، رابط ViewController را به روز کنید تا با پروتکل GMSMapViewDelegate: 

class ViewController: UIViewController, GMSMapViewDelegate

سپس خط زیر را در تابع loadView اضافه کنید تا GMSMapViewDelegate را روی ViewController تنظیم کنید. 

    mapView.delegate = self

اکنون برنامه را در شبیه ساز iOS ( Command+R ) بارگیری مجدد کنید و نقشه باید همانطور که در تصویر زیر نشان داده شده است ظاهر شود:

برنامه iOS که نقشه گوگل را نشان می دهد

شکل 1. برنامه iOS که نقشه گوگل را نشان می دهد.

به طور خلاصه، در این مرحله شما یک نمونه از 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. سبک نقشه (اختیاری)

می توانید سبک نقشه خود را با استفاده از استایل نقشه مبتنی بر ابر سفارشی کنید.

یک شناسه نقشه ایجاد کنید

اگر هنوز شناسه نقشه با سبک نقشه مرتبط با آن ایجاد نکرده‌اید، برای تکمیل مراحل زیر، راهنمای Map IDs را ببینید:

  1. یک شناسه نقشه ایجاد کنید.
  2. شناسه نقشه را به سبک نقشه مرتبط کنید.

شناسه نقشه را به برنامه خود اضافه کنید

برای استفاده از شناسه نقشه ای که در مرحله قبل ایجاد کردید، فایل ViewController.swift باز کنید و در متد loadView یک شی GMSMapID ایجاد کنید و شناسه نقشه را برای آن ارائه دهید. در مرحله بعد، نمونه 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. نشانگرها را به نقشه اضافه کنید

کارهای زیادی وجود دارد که توسعه دهندگان با Maps SDK برای iOS انجام می دهند، اما قرار دادن نشانگرها روی نقشه قطعاً محبوب ترین آنهاست. نشانگرها نقاط خاصی را روی نقشه نشان می‌دهند و یک عنصر رابط کاربری مشترک برای مدیریت تعامل کاربر هستند. اگر قبلاً از Google Maps استفاده کرده‌اید، احتمالاً با نشانگر پیش‌فرض آشنا هستید که شبیه پین‌های قرمز رنگ در شکل 2 است:

نقشه با نشانگرهای قرمز

شکل 2. نقشه با نشانگرهای قرمز.

این مرحله نحوه استفاده از کلاس GMSMarker را برای قرار دادن نشانگرها روی نقشه نشان می دهد.

توجه داشته باشید که نشانگرها را نمی توان تا زمانی که نقشه از مرحله قبل در رویداد چرخه حیات loadView کنترلر view بارگذاری شده روی نقشه قرار داد، بنابراین این مراحل را در رویداد چرخه حیات viewDidLoad که پس از بارگیری view (و نقشه) فراخوانی می شود، انجام دهید.

  1. یک شی 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)
  1. یک نمونه از GMSMarker ایجاد کنید.

Maps SDK برای iOS کلاس GMSMarker را ارائه می دهد. هر نمونه از GMSMarker یک نشانگر منفرد را روی نقشه نشان می‌دهد و با فراخوانی markerWithPosition: و ارسال یک شیء CLLocationCoordinate2D به SDK ایجاد می‌شود تا نشانگر را در کجای نقشه قرار دهد. 

    let marker = GMSMarker(position: mapCenter)
  1. یک نماد نشانگر سفارشی تنظیم کنید.

نشانگر پین قرمز پیش‌فرض برای نقشه‌های گوگل عالی است، اما سفارشی کردن نقشه شما نیز همینطور است! خوشبختانه، استفاده از نشانگر سفارشی با Maps SDK برای iOS ساده است. توجه داشته باشید که پروژه StarterApp شامل یک تصویر به نام "custom_pin.png" است که می توانید از آن استفاده کنید، اما می توانید از هر تصویری که می خواهید استفاده کنید.

برای تنظیم نشانگر سفارشی، ویژگی icon نشانگر را روی نمونه ای از UIImage قرار دهید. 

    marker.icon = UIImage(named: "custom_pin.png")
  1. نشانگر را به نقشه رندر کنید.

نشانگر شما ایجاد شده است، اما هنوز روی نقشه نیست. برای انجام این کار، ویژگی map نمونه GMSMarker را روی نمونه ای از GMSMapView تنظیم کنید. 

    marker.map = mapView

اکنون برنامه را دوباره بارگیری کنید و همانطور که در شکل 3 نشان داده شده است، اولین نقشه خود را با یک نشانگر ببینید!

برنامه iOS دارای نقشه گوگل با نشانگر قرمز در مرکز

شکل 3. برنامه iOS دارای یک نقشه گوگل با یک نشانگر قرمز در مرکز.

به طور خلاصه، در این بخش شما یک نمونه از کلاس 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 Maps Platform یک کتابخانه ابزاری مفید و منبع باز به نام Google Maps SDK for iOS Utility Library ایجاد کرده است که در میان بسیاری از موارد دیگر، دسته بندی نشانگرها را به صورت خودکار برای شما مدیریت می کند. درباره خوشه‌بندی نشانگرها در اسناد پلتفرم Google Maps بیشتر بخوانید یا منبع کتابخانه ابزار iOS را در GitHub بررسی کنید.

  1. نشانگرهای بیشتری به نقشه اضافه کنید.

برای دیدن دسته بندی نشانگرها در عمل، باید نشانگرهای زیادی روی نقشه داشته باشید. برای ساده کردن این، از نشانگر مولد ارائه شده در پروژه شروع در MarkerGenerator.swift استفاده کنید.

برای افزودن تعداد مشخصی از نشانگرها به نقشه خود، MarkerGenerator(near:count:).markerArray در چرخه عمر viewDidLoad کنترلر view در زیر کد مرحله قبل فراخوانی کنید. این روش تعداد نشانگرهای مشخص شده در count در مکان های تصادفی در اطراف مختصات مشخص شده در یک شی CLLocationCoordinate2D ایجاد می کند. در این صورت می توانید متغیر mapCenter را که قبلا ایجاد کرده اید به آن منتقل کنید. نشانگرها در یک [GMSMarker] برگردانده می شوند. 

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

می‌توانید با افزودن این خطوط پس از تعریف markerArray و سپس اجرای برنامه، نحوه ظاهر این تعداد نشانگر را آزمایش کنید. قبل از رفتن به مراحل بعدی، حتماً این خطوط را نظر دهید، که در عوض از خوشه نشانگر برای مدیریت نمایش نشانگرها استفاده می شود: 

    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    for marker in markerArray {
      marker.map = mapView
    }
  1. Google Maps SDK for iOS Utility Library را وارد کنید.

برای افزودن کتابخانه ابزار Maps iOS به عنوان یک وابستگی به پروژه خود، این را به لیست وابستگی ها در بالای ViewController.swift اضافه کنید: 

import GoogleMapsUtils
  1. خوشه نشانگر را پیکربندی کنید.

برای استفاده از خوشه نشانگر، باید سه چیز را برای پیکربندی نحوه عملکرد آن ارائه دهید: یک الگوریتم خوشه‌بندی، یک مولد آیکون و یک رندر. الگوریتم رفتار نحوه خوشه بندی نشانگرها را تعیین می کند، مانند فاصله بین نشانگرها برای گنجاندن در همان خوشه. مولد آیکون آیکون های خوشه ای را برای استفاده در سطوح مختلف زوم فراهم می کند. رندر رندر واقعی نمادهای خوشه روی نقشه را انجام می دهد.

در صورت تمایل می توانید همه اینها را از ابتدا بنویسید. از طرف دیگر، کتابخانه ابزار Maps iOS، پیاده‌سازی‌های پیش‌فرض را برای سریع‌تر کردن فرآیند ارائه می‌کند. خطوط زیر را اضافه کنید: 

    // 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)
  1. یک نمونه از 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)
  1. نشانگرها را اضافه کنید و خوشه نشانگر را اجرا کنید.

اکنون که نمونه خوشه نشانگر شما پیکربندی شده است، آرایه نشانگرهایی را که باید با فراخوانی add(items:) خوشه بندی شوند را به مدیر خوشه ارسال کنید و سپس با فراخوانی cluster خوشه را اجرا کنید. 

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

برنامه خود را مجدداً بارگیری کنید، و اکنون باید نشانگرهای زیادی را ببینید که همگی به خوبی مانند مثال در شکل 6 در کنار هم قرار گرفته اند. ادامه دهید و با نزدیک کردن و زوم کردن روی نقشه، با سطوح مختلف بزرگنمایی بازی کنید، تا ببینید که خوشه های نشانگر با بزرگنمایی/کوچکنمایی سازگار می شوند.

برنامه iOS با نقشه گوگل و نشانگرهای خوشه ای

شکل 6. برنامه iOS با نقشه گوگل و نشانگرهای خوشه ای.

برای جمع‌بندی، در این مرحله شما نمونه‌ای از خوشه نشانگر را از Google Maps SDK برای کتابخانه ابزار 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 که قبلاً روی view controller تنظیم کرده‌اید، برای بهبود تجربه کاربری نقشه‌تان، مدیریت بیشتری از تعاملات کاربر اضافه می‌کنید.

Maps SDK برای iOS یک سیستم رویداد جامعی را ارائه می‌کند که از طریق نماینده نمای نقشه پیاده‌سازی می‌شود، که شامل کنترل‌کننده‌های رویداد است که به شما امکان می‌دهد هنگام تعاملات مختلف کاربر، کد را اجرا کنید. به عنوان مثال، نماینده MapView شامل روش‌هایی است که به شما امکان می‌دهد اجرای کد را برای تعاملات فعال کنید، مانند کلیک کاربر روی نقشه و نشانگرها، حرکت در نمای نقشه، بزرگ‌نمایی و کوچک‌نمایی و غیره.

در این مرحله، نقشه را به صورت برنامه‌ریزی حرکت می‌دهید تا بر روی هر نشانگری که توسط کاربر ضربه می‌زند، مرکز آن قرار گیرد.

  1. نشانگر شنونده ضربه ای را پیاده سازی کنید.

mapView(_:didTap:) هر زمانی که کاربر به یکی از نشانگرهایی که قبلاً ایجاد کرده‌اید ضربه می‌زند و هر زمانی که کاربر روی خوشه نشانگر ضربه می‌زند (خوشه‌های نشانگر داخلی به عنوان نمونه‌ای از GMSMarker پیاده‌سازی می‌شوند) نامیده می‌شود.

برای پیاده‌سازی شنونده رویداد، ابتدا آن را در پایین ViewController.swift قبل از بسته‌بندی فرفری شروع کنید. 

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

    return false
  }

توجه داشته باشید که متد در حال برگشت false است. انجام این کار به iOS SDK می‌گوید که پس از اجرای کد مدیریت رویداد شما، به اجرای رفتار پیش‌فرض GMSMarker ، مانند نمایش پنجره اطلاعات در صورت پیکربندی، ادامه دهد.

  1. رویداد ضربه زدن را مدیریت کنید و دوربین را متحرک کنید تا با ضربه زدن روی یک نشانگر یا خوشه نشانگر، نقشه را دوباره تغییر دهید.

هنگام فراخوانی، mapView(_:didTap:) نمونه ای از GMSMarker را ارسال می کند که روی آن ضربه زده شده است تا بتوانید آن را در کد خود مدیریت کنید. می‌توانید با فراخوانی animate(toLocation:) در نمای نقشه از داخل کنترل‌کننده رویداد، و ارسال موقعیت نمونه نشانگر از ویژگی position ، از این نمونه برای جدیدتر کردن نقشه استفاده کنید. 

    // Animate to the marker
    mapView.animate(toLocation: marker.position)
  1. با ضربه زدن روی یک خوشه نشانگر بزرگنمایی کنید.

یک الگوی UX رایج این است که وقتی روی خوشه های نشانگر ضربه زده می شود، بزرگنمایی کنید. این به کاربران اجازه می دهد تا نشانگرهای خوشه ای را مشاهده کنند، زیرا خوشه در سطوح بزرگنمایی کمتر گسترش می یابد.

همانطور که قبلا ذکر شد، نماد خوشه نشانگر در واقع پیاده سازی 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 نقطه تصادفی نشان می دهد و تعامل کاربر را کنترل می کند. برای آخرین مرحله از این نرم افزار کد، از ویژگی های ترسیم Maps SDK برای iOS استفاده می کنید تا یک ویژگی مفید اضافی را به تجربه نقشه خود اضافه کنید.

تصور کنید که این نقشه توسط کاربرانی که می خواهند شهر سیدنی را کاوش کنند استفاده شود. یک ویژگی مفید این است که هنگام کلیک روی یک نشانگر، شعاع اطراف آن را تجسم کنید. این به کاربر این امکان را می دهد که به سرعت بفهمد که چه مقاصدی در فاصله کوتاهی از نشانگر کلیک شده قرار دارند.

iOS SDK شامل مجموعه ای از توابع برای ترسیم اشکال بر روی نقشه است، مانند مربع، چند ضلعی، خطوط و دایره. در این مرحله، دایره‌ای را رندر کنید تا شعاع 800 متری (تقریباً نیم مایل) در اطراف یک نشانگر را با کلیک روی آن نشان دهید.

  1. یک متغیر نمونه circle را به اجرای ViewController اضافه کنید.

این متغیر نمونه برای ذخیره جدیدترین دایره ترسیم شده استفاده می شود، به طوری که می توان آن را قبل از ترسیم دیگری از بین برد. از این گذشته، اگر هر نشانگر ضربه زده شده یک دایره در اطراف خود کشیده شود، برای کاربر خیلی مفید نخواهد بود و ظاهر خوبی نخواهد داشت!

برای انجام این کار، پیاده سازی ViewController را به صورت زیر به روز کنید: 

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
  private var circle: GMSCircle? = nil
  ...
}
  1. وقتی روی یک نشانگر ضربه می زنید دایره را بکشید.

در پایین روش mapView(_:didTap:) درست بالای عبارت return false ، کد نشان داده شده در اینجا را اضافه کنید تا نمونه ای از کلاس GMSCircle iOS SDK ایجاد کنید تا با فراخوانی GMSCircle(position:radius:) یک دایره جدید با شعاع 800 متری رسم کنید و موقعیت نشانگر ضربه خورده را به آن ارسال کنید. 

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
  1. دایره را مدل دهید.

به طور پیش فرض، GMSCircle یک دایره با خط مشکی و پر شفاف ترسیم می کند. این برای نشان دادن شعاع کار می کند، اما خیلی خوب به نظر نمی رسد و دیدن آن کمی سخت است. در مرحله بعد، با اختصاص یک UIColor به ویژگی fillColor دایره، به دایره یک رنگ پر بدهید تا استایل آن بهبود یابد. کد نشان داده شده در اینجا یک پر خاکستری با شفافیت 50٪ اضافه می کند: 

    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
  1. دایره را روی نقشه رندر کنید.

درست مانند زمانی که نشانگرها را قبلا ایجاد کردید، ایجاد یک نمونه از GMSCircle آن را روی نقشه نشان نمی‌دهد. برای انجام این کار، نمونه نمای نقشه را به ویژگی map دایره اختصاص دهید. 

    circle?.map = mapView
  1. حلقه‌هایی را که قبلا رندر شده‌اند حذف کنید.

همانطور که قبلا ذکر شد، ادامه افزودن دایره ها به نقشه تجربه کاربری خیلی خوبی نخواهد بود. برای حذف دایره ای که توسط یک رویداد ضربه قبلی ارائه شده است، ویژگی map circle را در بالای mapView(_:didTap:) روی nil قرار دهید. 

    // 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 ساخته اید.

چیزی که یاد گرفتی

بعدش چی؟

  • برای الهام بیشتر، مخزن نمونه ها و دموهای GitHub maps-sdk-for-ios-samples را کاوش یا جدا کنید
  • از کدهای Swift بیشتر برای ساخت برنامه‌های iOS با پلتفرم Google Maps بیاموزید
  • با پاسخ دادن به نظرسنجی زیر به ما در ایجاد محتوایی که برای شما مفیدتر است کمک کنید:

دوست دارید چه کدهای دیگری را ببینید؟

تجسم داده ها بر روی نقشه ها بیشتر در مورد سفارشی کردن سبک نقشه های من ساختمان برای تعاملات سه بعدی در نقشه ها

نمی توانید کد لبه مورد علاقه خود را پیدا کنید؟ آن را با یک شماره جدید در اینجا درخواست کنید .