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

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

درباره این codelab

subjectآخرین به‌روزرسانی: مه ۱۱, ۲۰۲۲
account_circleنویسنده: Google Maps Platform Team

1. قبل از اینکه شروع کنی

خلاصه

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

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

342520482a888519.png

در این کد لبه، یک برنامه 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 شروع کنید

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

  1. یک حساب صورتحساب ایجاد کنید.
  2. یک پروژه ایجاد کنید.
  3. APIها و SDKهای پلتفرم Google Maps را فعال کنید (در قسمت قبل فهرست شده است).
  4. یک کلید 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 را برای ایجاد یک حساب صورت‌حساب و یک پروژه ببینید.

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

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

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

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

  1. مخزن GitHub را برای این Codelab در 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 برای 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 (یا ویرایشگر متن دلخواهتان) Pods > Podfile را باز کنید و فایل را به‌روزرسانی کنید تا Maps SDK برای iOS و وابستگی‌های کتابخانه ابزارهای کاربردی تحت use_frameworks! :

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'
  1. برنامه 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;
  1. در زیر عبارت import SDK iOS، یک ثابت NSString با مقدار تنظیم شده برای کلید API خود اعلام کنید:
static NSString *const kMapsAPIKey = @"YOUR API KEY";
  1. با فراخوانی 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 است که بسیاری از روش‌هایی را ارائه می‌کند که به شما امکان می‌دهد نمونه‌های نقشه را ایجاد و دستکاری کنید. در اینجا نحوه انجام این کار آمده است.

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

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

@import GoogleMaps;
  1. یک متغیر نمونه ViewController برای ذخیره GMSMapView کنید.

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

@implementation ViewController {
  GMSMapView *_mapView;
}
  1. در loadView ، یک نمونه از GMSCameraPosition ایجاد کنید.

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

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  1. در loadView ، یک نمونه از GMSMapView برای نمونه سازی نقشه ایجاد کنید.

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

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

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;
  1. GMSMapViewDelegate را روی view controller تنظیم کنید.

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

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

@interface ViewController ()<GMSMapViewDelegate>

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

_mapView.delegate = self;

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

2e6ebac422323aa6.png

به طور خلاصه، در این مرحله شما یک نمونه از 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 را ببینید:

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

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

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

590815267846f166.png

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

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

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

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

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  1. یک نمونه از GMSMarker کنید.

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

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  1. یک نماد نشانگر سفارشی تنظیم کنید.

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

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

marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  1. نشانگر را به نقشه ارائه دهید.

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

marker.map = _mapView;

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

a4ea8724f8c5ba20.png

به طور خلاصه، در این بخش شما یک نمونه از کلاس 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. خوشه بندی نشانگر را فعال کنید

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

6e39736160c6bce4.png

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

4abb38cd97cab3f1.png

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

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

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

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

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];
  1. Google Maps SDK for iOS Utility Library را وارد کنید.

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

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

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

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

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

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

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  1. یک نمونه از GMUClusterManager کنید.

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

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

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

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];
  1. نشانگرها را اضافه کنید و خوشه نشانگر را اجرا کنید.

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

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

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

c49383b07752bfc4.png

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

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

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

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

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

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

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

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

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

[_mapView animateToLocation:marker.position];
  1. وقتی روی یک خوشه نشانگر ضربه زده می شود، بزرگنمایی کنید.

یک الگوی 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 متری (تقریباً نیم مایل) را در اطراف نشانگر نشان دهد.

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

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

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

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}
  1. وقتی روی یک نشانگر ضربه می زنید دایره را بکشید.

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

_circ = [GMSCircle circleWithPosition:marker.position radius:800];
  1. دایره را مدل دهید.

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

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  1. دایره را روی نقشه رندر کنید.

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

_circ.map = _mapView;
  1. حلقه‌هایی را که قبلا رندر شده‌اند حذف کنید.

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

_circ.map = nil;

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

342520482a888519.png

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

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

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

bug_report گزارش اشتباه