این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

1. قبل از شروع

چکیده

در این کد لبه همه چیزهایی را که برای شروع استفاده از پلتفرم نقشه های گوگل برای ساخت اپلیکیشن های iOS در Objective-C نیاز دارید، یاد خواهید گرفت. شما تمام اصول اولیه را از راه‌اندازی تا بارگیری Maps SDK برای iOS، نمایش اولین نقشه، کار با نشانگرها و خوشه‌بندی نشانگرها، طراحی روی نقشه، و مدیریت تعامل با کاربر، یاد خواهید گرفت.

چیزی که خواهی ساخت

در این کد لبه، شما یک برنامه iOS می سازید که کارهای زیر را انجام می دهد:

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

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

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

پیش نیازها

برای تکمیل این کد لبه باید با موارد زیر آشنا شوید. اگر قبلاً با کار با پلتفرم نقشه‌های گوگل آشنا هستید، به سراغ آزمایشگاه کد بروید!

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

در این لبه کد، از محصولات پلتفرم نقشه های گوگل زیر استفاده خواهید کرد:

Maps SDK برای iOS
Google Maps SDK for iOS Utility Library

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

اگر قبلاً از Google Maps Platform استفاده نکرده‌اید، راهنمای Get Started with Google Maps Platform را دنبال کنید یا لیست پخش Started with Google Maps Platform را برای تکمیل مراحل زیر تماشا کنید:

یک حساب صورتحساب ایجاد کنید.
یک پروژه ایجاد کنید.
APIها و SDKهای پلتفرم Google Maps را فعال کنید (در قسمت قبل فهرست شده است).
یک کلید API ایجاد کنید.

سایر الزامات این کد لبه

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

یک حساب Google Cloud Platform با فعال کردن صورت‌حساب
یک کلید API پلتفرم Google Maps با فعال کردن Maps SDK برای iOS
دانش پایه Objective-C
Xcode 12.0 با هدف SDK 12.0 یا بالاتر

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

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

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

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

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

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

راه اندازی الگوی شروع پروژه

قبل از شروع این کد لبه، برای دانلود قالب پروژه شروع کننده و همچنین کد راه حل کامل، موارد زیر را انجام دهید:

مخزن GitHub را برای این کد لبه در https://github.com/googlecodelabs/maps-platform-101-objc دانلود یا جدا کنید.

پروژه 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.

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

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

برای شروع، در Xcode (یا ویرایشگر متن دلخواه خود) Pods > Podfile را باز کنید و فایل را به‌روزرسانی کنید تا Maps SDK برای iOS و وابستگی‌های کتابخانه ابزارهای کاربردی را تحت use_frameworks! :

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

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

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

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

@import GoogleMaps;

در زیر عبارت import SDK iOS، یک ثابت NSString با مقدار تنظیم شده برای کلید API خود اعلام کنید:

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

با فراخوانی 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

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

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

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

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

ViewController.m باز کنید.

این جایی است که شما تمام کارهای باقی مانده برای این کد لبه را انجام خواهید داد. متوجه خواهید شد که رویدادهای چرخه حیات loadView و viewDidLoad برای view controller قبلاً برای شما ارسال شده است. 2. Maps SDK برای iOS را با افزودن موارد زیر در بالای فایل وارد کنید:

@import GoogleMaps;

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

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

@implementation ViewController {
  GMSMapView *_mapView;
}

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

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

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

در loadView ، یک نمونه از GMSMapView برای نمونه سازی نقشه ایجاد کنید.

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

برای نمایش واقعی نقشه، در مرحله بعد نمای ریشه کنترلر view را روی _mapview تنظیم می‌کنید که نقشه را تمام صفحه نمایش می‌دهد.

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

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

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

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

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

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

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

افزودن شناسه نقشه به برنامه شما

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

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

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

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

یک شی CLLocationCoordinate2D را تعریف کنید.

CLLocationCoordinate2D ساختاری است که توسط کتابخانه CoreLocation iOS در دسترس قرار گرفته است که یک موقعیت جغرافیایی را در طول و عرض جغرافیایی تعیین شده تعریف می کند. برای شروع ایجاد اولین نشانگر خود، یک شی CLLocationCoordinate2D تعریف کنید و طول و عرض جغرافیایی را در مرکز نقشه تنظیم کنید. مختصات مرکز نقشه را می توان از نمای نقشه، با استفاده از ویژگی های camera.target.latitude و camera.target.longitude مشاهده کرد.

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

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

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

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];

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

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

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

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

نشانگر را به نقشه رندر کنید.

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

marker.map = _mapView;

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

به طور خلاصه، در این بخش شما یک نمونه از کلاس GMSMarker ایجاد کردید و آن را در نمای نقشه اعمال کردید تا یک نشانگر روی نقشه نمایش داده شود. رویداد چرخه حیات 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;
}

7. خوشه بندی نشانگر را فعال کنید

هنگام استفاده از بسیاری از نشانگرها یا نشانگرها که در مجاورت یکدیگر قرار دارند، ممکن است با مشکلی روبرو شوید که نشانگرها روی هم قرار می گیرند یا خیلی شلوغ به نظر می رسند که باعث تجربه کاربری بدی می شود. به عنوان مثال، اگر دو نشانگر بسیار نزدیک به هم باشند، می توانید با وضعیتی مانند این روبرو شوید:

این جایی است که خوشه‌بندی نشانگر وارد می‌شود. خوشه‌بندی نشانگر یکی دیگر از ویژگی‌های رایج است که نشانگرهای نزدیک را در یک نماد گروه‌بندی می‌کند که بسته به سطح بزرگ‌نمایی تغییر می‌کند، مانند این:

الگوریتم برای خوشه بندی نشانگر، منطقه قابل مشاهده نقشه را به یک شبکه تقسیم می کند، سپس نمادهایی را که در همان سلول هستند، خوشه بندی می کند. خوشبختانه لازم نیست نگران هیچ‌کدام از این‌ها باشید، زیرا تیم Google Maps Platform یک کتابخانه مفید و منبع باز به نام Google Maps SDK for iOS Utility Library ایجاد کرده است. این کتابخانه، در میان بسیاری از موارد دیگر، به طور خودکار دسته بندی نشانگرها را برای شما انجام می دهد. می‌توانید درباره خوشه‌بندی نشانگرها در اسناد پلتفرم Google Maps اطلاعات بیشتری کسب کنید، یا منبع کتابخانه ابزار iOS را در GitHub بررسی کنید.

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

برای دیدن دسته بندی نشانگرها در عمل، باید نشانگرهای زیادی روی نقشه داشته باشید. برای انجام این کار آسان، یک نشانگر مولد مناسب در پروژه شروع در LocationGenerator.m برای شما ارائه شده است.

برای افزودن هر تعداد نشانگر به نقشه خود، کافیست با generateMarkersNear:count: در چرخه عمر viewDidLoad کنترلر view در زیر کد مرحله قبل تماس بگیرید. این روش تعداد نشانگرهای مشخص شده در count در مکان های تصادفی در اطراف مختصات مشخص شده در یک شی CLLocationCoordinate2D ایجاد می کند. در این حالت، می‌توانید متغیر mapCenter را که قبلا ایجاد کرده‌اید، به آن منتقل کنید. نشانگرها در یک NSArray برگردانده می شوند.

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

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

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

@import GoogleMapsUtils;

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

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

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

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

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

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

یک نمونه از GMUClusterManager ایجاد کنید.

GMUClusterManager کلاسی است که خوشه بندی نشانگر را با استفاده از الگوریتم، مولد آیکون و رندر مشخص شده توسط شما پیاده سازی می کند. برای ایجاد رندر و در دسترس قرار دادن آن برای نمای نقشه، ابتدا یک متغیر نمونه به پیاده سازی ViewController اضافه کنید تا نمونه مدیریت خوشه ذخیره شود:

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

سپس، نمونه GMUClusterManager را در رویداد چرخه حیات viewDidLoad ایجاد کنید:

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

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

اکنون که نمونه خوشه نشانگر شما پیکربندی شده است، تنها کاری که باید انجام دهید این است که آرایه نشانگرهایی را که قرار است با فراخوانی addItems: سپس با فراخوانی cluster ، خوشه را اجرا کنید.

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

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

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

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

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

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

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

برای پیاده سازی شنونده رویداد، ابتدا آن را در پایین ViewController.m قبل از دستور end قرار دهید.

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

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

  return NO;
}

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

هنگام فراخوانی، mapView:didTapMarker نمونه‌ای از GMSMarker را ارسال می‌کند که روی آن ضربه زده شده است و به شما امکان می‌دهد آن را در کد خود مدیریت کنید. می‌توانید با فراخوانی animateToLocation: در نمای نقشه از داخل کنترل‌کننده رویداد، و ارسال موقعیت نمونه نشانگر، که در ویژگی position موجود است، از این نمونه برای جدیدتر کردن نقشه استفاده کنید.

[_mapView animateToLocation:marker.position];

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

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

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

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

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

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

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

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

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

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

در پایین روش mapView:didTapMarker ، کد زیر را اضافه کنید تا نمونه‌ای از کلاس GMSCircle iOS SDK ایجاد کنید تا با فراخوانی circleWithPosition:radius: دایره جدیدی به شعاع 800 متر بکشید و آن را در موقعیت نشانگر ضربه‌خورده قرار دهید، درست همانطور که در بالا هنگام تغییر نقشه انجام دادید.

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

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

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

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

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

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

_circ.map = _mapView;

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

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

_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 ساخته اید، از جمله بارگیری Maps SDK برای iOS، بارگیری نقشه، کار با نشانگرها، کنترل و ترسیم روی نقشه، و افزودن تعامل با کاربر.

برای مشاهده کد تکمیل شده، بررسی کنید که پروژه تمام شده دایرکتوری /solution است.

بعدش چی؟

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

نوع نقشه را برای نمایش نقشه های ماهواره ای، ترکیبی و زمین تغییر دهید.
سایر تعاملات کاربر مانند زوم و کنترل های نقشه را سفارشی کنید.
پنجره های اطلاعاتی را برای نمایش اطلاعات در هنگام کلیک روی نشانگرها اضافه کنید.
Places SDK برای iOS را بررسی کنید تا ویژگی‌ها و داده‌های غنی مکان پلتفرم Google Maps را به برنامه خود اضافه کنید.

برای ادامه یادگیری روش‌های بیشتر برای کار با Google Maps Platform در وب، این پیوندها را بررسی کنید:

یک نقشه به برنامه iOS خود اضافه کنید (Objective-C) با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

1. قبل از شروع

چکیده

چیزی که خواهی ساخت

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

پیش نیازها

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

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

سایر الزامات این کد لبه

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

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

راه اندازی الگوی شروع پروژه

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

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

5. طراحی نقشه مبتنی بر ابر (اختیاری)

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

افزودن شناسه نقشه به برنامه شما

ViewController.m

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

7. خوشه بندی نشانگر را فعال کنید

8. افزودن تعامل کاربر

9. روی نقشه بکشید

10. تبریک می گویم

بعدش چی؟

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