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

1. قبل از شروع

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

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

پیش نیازها

• دانش اولیه توسعه سوئیفت و 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 ، روی منوی کشویی پروژه کلیک کنید و پروژه ای را که می خواهید برای این کد لبه استفاده کنید انتخاب کنید.

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

شروع سریع

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

1. اگر git را نصب کرده اید، مخزن را کلون کنید.

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

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

کد را به من بدهید

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

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

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

اولین قدم برای استفاده از Maps SDK برای iOS، نصب وابستگی های مورد نیاز است. دو مرحله برای این فرآیند وجود دارد: نصب Maps SDK برای iOS و Maps SDK برای 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 و وابستگی‌های کتابخانه ابزار در زیر نظر # 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

2. برنامه Maps SDK برای iOS و Maps SDK برای iOS Utility Library را نصب کنید.

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

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

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

import GoogleMaps

5. با فراخوانی 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 قبلاً برای شما ارسال شده است.

2. با افزودن این مورد در بالای فایل، Maps SDK را برای iOS وارد کنید:

import GoogleMaps

3. یک متغیر نمونه ViewController برای ذخیره GMSMapView کنید.

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

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}

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

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

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

5. در 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

6. GMSMapViewDelegate را روی view controller تنظیم کنید.

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

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

class ViewController: UIViewController, GMSMapViewDelegate

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

    mapView.delegate = self

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

شکل 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. شناسه نقشه را به سبک نقشه مرتبط کنید.

توجه: استفاده از شناسه نقشه در Maps SDK برای Android یا Maps SDK برای iOS بارگذاری نقشه را راه‌اندازی می‌کند که در مقابل Dynamic Maps SKU شارژ می‌شود. برای اطلاعات بیشتر به صورت‌حساب Google Maps مراجعه کنید.

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

برای استفاده از شناسه نقشه ای که در مرحله قبل ایجاد کردید، فایل 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)

2. یک نمونه از GMSMarker کنید.

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

    let marker = GMSMarker(position: mapCenter)

3. یک نماد نشانگر سفارشی تنظیم کنید.

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

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

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

4. نشانگر را به نقشه ارائه دهید.

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

    marker.map = mapView

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

شکل 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
    }

2. Google Maps SDK for iOS Utility Library را وارد کنید.

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

import GoogleMapsUtils

3. خوشه نشانگر را پیکربندی کنید.

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

در صورت تمایل می‌توانید همه اینها را از ابتدا بنویسید، اما کتابخانه ابزار 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)

4. یک نمونه از 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)

5. نشانگرها را اضافه کنید و خوشه نشانگر را اجرا کنید.

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

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

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

شکل 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 ، مانند نمایش پنجره اطلاعات در صورت پیکربندی، ادامه دهد.

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

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

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

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

یک الگوی 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
  ...
}

2. وقتی روی یک نشانگر ضربه می زنید دایره را بکشید.

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

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

3. دایره را مدل دهید.

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

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

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

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

    circle?.map = mapView

5. حلقه‌هایی را که قبلا رندر شده‌اند حذف کنید.

همانطور که قبلا ذکر شد، اضافه کردن دایره ها به نقشه تجربه کاربری خیلی خوبی نخواهد بود. برای حذف دایره ارائه شده توسط یک رویداد ضربه قبلی، ویژگی 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 ساخته اید.

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

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

بعدش چی؟

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

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

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

آیا کد لبه مورد نظر شما در بالا فهرست نشده است؟ آن را با یک شماره جدید در اینجا درخواست کنید .