دوره تکمیلی iOS : آموزش MapKit API به همراه مثال

در جلسه قبل ، نحوه استفاده از فریم ورک Core Location را جهت بازیابی اطلاعات موقعیت مکانی کاربر ، آموزش دادیم. هم چنین ، نشان دادیم که چگونه مختصات GPS را به یک آدرس واقعی تبدیل کنیم. با این حال ، بهترین روش برای نشان دادن موقعیت مکانی ، pin کردن آن بر روی نقشه می باشد. به لطف MapKit API ، برنامه نویسان می توانند به سادگی از نقشه های داخلی ، برای pin کردن یک موقعیت مکانی استفاده نمایند.

در iOS Developer Reference توضیح داده شده است: " فریم ورک Map Kit یک رابط فراهم می کند که می توان از طریق آن ، نقشه ها را به طور مستقیم در داخل پنجره ها و view های اپ خود جاسازی نمود. این فریم ورک ، هم چنین ، از حاشیه نویسی (annotating) نقشه ، افزودن پوشش ها (overlays) و انجام جستجوهای geocoding معکوس ، جهت تعیین اطلاعات placemark برای یک مختصات مورد نظر پشتیبانی می کند."

 MapKit ، یک API شسته و رفته است ، که همراه با iOS SDK است و این امکان را به ما می دهد ، که در اپ خود نقشه ها را نمایش دهیم و از طریق این نقشه ها ، مسیریابی کنیم ، برای مکان های خاص ، حاشیه نویسی اضافه کنیم ، پوشش ها را در نقشه های موجود اضافه کنیم و غیره. در این آموزش ، از میان اصول پایه ای API گذر خواهیم کرد و نشان خواهیم داد که چگونه یک pin را روی نقشه قرار دهیم. طبق روال ، به جای پرداخت به موضوعات تئوری ، بر روی یک اپ ساده کار خواهیم کرد. از طریق این تمرینات عملی که انجام می دهیم ، امیدواریم که ایده ها و درکی بهتری نسبت به MapKit به دست آورید.

بیایید کار را شروع کنیم!

ایجاد پروژه و طراحی رابط کاربری

برای ایجاد این پروژه ، ما از Xcode 4.5 ، استفاده می کنیم . اگر شما از ورژن های پایین تر Xcode ، استفاده می کنید ، برخی از صفحات در پرژه شما ، تفاوت اندکی خواهند داشت.

ابتدا یک پروژه Xcode جدید ، با استفاده از تمپلت Single View Template ، ایجاد می کنیم. بیایید نام پروژه را “MyLocationMap” ، قرار داده و پروژه را با پارامترهای زیر (مطابق تصویر) ، تنظیم نماییم:

هنگامی که پروژه با موفقیت ایجاد شد ، به Storyboard رفته و رابط کاربری را طراحی می کنیم. ما می خواهیم ، view controller را در یک navigation controller ، جاسازی نماییم. ابتدا ، view controller را انتخاب می کنیم. سپس  “editor” > “Embed in” >  “Navigation Controller” را انتخاب می کنیم.

به طور دلخواه ، می توانیم عنوان navigation bar را تنظیم کنیم . ما نام آن را “My Maps” ، قرار می دهیم. در آخر ، یک Map View ، از کتابخانه اشیاء ، به داخل view controller درگ می کنیم. در بخش Attribute Inspector ، از Map View ، گزینه “Show User Location” را انتخاب می کنیم. با جاسازی user location ، نقشه به طور خودکار موقعیت مکان فعلی کاربر را نشان می دهد.

از آن جایی که ، اپ از فریم ورک های Core Location و MapKit ، استفاده می کند ، این دو فریم ورک را به پروژه خود اضافه می کنیم. در Project Navigator ، پروژه “MyLocationMap” را انتخاب می کنیم ، و سپس “MyLocationMap” را در بخش Targets  انتخاب می کنیم. در ادامه ، “Build Phases” را انتخاب کرده و “Link Binary with Libraries” را بسط می دهیم. روی کلید “+” ، کلیک کرده و دو فریم ورک “CoreLocation” و “MapKit” را اضافه می کنیم.

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

به محض این که اپ ، راه اندازی می شود ، از ما اجازه دسترسی به سرویس location را می خواهد. فقط کلید “OK” را ضربه می زنیم ، تا اجازه استفاده از اطلاعات موقعیت مکان فعلی را به اپ بدهیم.

آیا هنوز ، نحوه تست اپ اطلاع یافتن از موقعیت مکانی (آموزش جلسه قبل) را با استفاده از شبیه سازی iOS ، به یاد دارید؟ به خاطر دارید که شبیه ساز iOS ، به ما اجازه می دهد که یک موقعیت مکانی را جعل کنیم. می توانیم از نوار منو ، “Debug” گزینه “Location” را انتخاب کنیم. location را از “None” به “Apple” تغییر می دهیم. سپس ، اپ یک نقطه به رنگ آبی را نشان می دهد ، که موقعیت فعلی را بر روی نقشه معین می کند.

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

زوم کردن بر روی موقعیت مکان فعلی

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

بسیار خوب! بیایید به بخش کد برنامه برویم.

ابتدا ، یک outlet در فایل “MyLocationViewController.h”می سازیم و اتصال آن را با Map View برقرار می کنیم. در فایل “MyLocationViewController.h” ، خصیصه “mapView” را تعریف می نماییم و پروتکل MKMapViewDelegate را اجرا می کنیم. کدها باید مطابق کد زیر باشند:

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>
 
@interface MyLocationViewController : UIViewController <MKMapViewDelegate>
 
@property (nonatomic, strong) IBOutlet MKMapView *mapView;
 
@end

بیایید ، فعلاً پروتکل MKMapViewDelegate را کنار بگذاریم ، بعداً در مورد آن صحبت خواهیم کرد. به فایل “MyLocationViewController.m” ، رفته و عبارت synthesis را اضافه می کنیم:

@interface MyLocationViewController ()
 
@end
 
@implementation MyLocationViewController
@synthesize mapView;
 
.
.
.

در آخر ، به Storyboard برمی گردیم و متغیر mapView را به مؤلفه Map View متصل می کنیم. (کلید کنترل بر روی صفحه کلید را فشار داده و نگه می داریم ، روی آیکون “File Owner” ، کلیک کرده و آن را به داخل Map View درگ می کنیم)

اکنون ، برویم سراغ پروتکل MKMapViewDelegate . این پروتکل برای چه کاری است؟ چرا نیاز داریم که از آن استفاده نماییم؟ از لحاظ فنی ، پروتکل MKMapViewDelegate ، یک مجموعه از متدهای اختیاری را تعریف می کند که می توانیم از آنها برای دریافت پیام های به روزرسانی مربوط به نقشه ، استفاده کنیم. برای مثال ، اگر همراه با آیفون خود بدوید ، خواهید دید که موقعیت مکانی شما ، در حین دویدن ، تغییر می نماید. برای دریافت تغییرات/به روزسانی موقعیت مکانی ، می توانیم این پروتکل را استفاده کنیم. متد mapView:didUpdateUserLocation ، هر زمان که map view ، یک به روز رسانی جدید موقعیت مکانی را دریافت می کند ، فراخوانی می شود.

این مثال ، یکی از مواردی است که در آن پروتکل MKMapViewDelegate را اجرا می نماییم. هم چنین ، می توانیم از آن برای تغییر annotation view ، نیز استفاده کنیم که در بخش بعدی ، به آن خواهیم پرداخت.

به فایل “MyLocationViewController.m” ، برمی گردیم و متد “viewDidLoad” را برای تخصیص نماینده mapView ، به روز رسانی می کنیم.

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.mapView.delegate = self;
}

متد didUpdateUserLocation ، را نیز اضافه می کنیم:

- (void)mapView:(MKMapView *)mapView didUpdateUserLocation:(MKUserLocation *)userLocation
{
    MKCoordinateRegion region = MKCoordinateRegionMakeWithDistance(userLocation.coordinate, 800, 800);
    [self.mapView setRegion:[self.mapView regionThatFits:region] animated:YES];
}

خطوط کد بالا ، به map view دستور می دهد که در منطقه ای به ابعاد 800 در 800 متر ، در اطراف موقعیت کاربر زوم نماید.

اپ را دوباره اجرا می کنیم ، location را به دفتر مرکزی Apple تنظیم می کنیم. اکنون ، نقشه به طور خودکار ، به مقیاس موردنظر ما ، به روز رسانی می شود.

افزودن یک Annotation به نقشه

همان طور که در screenshot های فوق می بینید ، موقعیت فعلی کاربر ، به صورت یک نقطه آبی رنگ نشان داده می شود. می خواهیم که آن را تغییر داده و یک پین را بر روی نقشه قرار دهیم.

با توجه به iOS developer guide ، به منظور نمایش دادن یک annotation (حاشیه نویسی) بر روی یک نقشه ، اپ ما باید دو شیء مجزا را فراهم نماید:

• یک شیء که از پروتکل MKAnnotation protocol پیروی می نماید و داده های annotation را مدیریت می نماید. (این شیء ، یک شیء annotation است.)
• یک view (که از کلاس MKAnnotationView حاصل می شود) که برای ترسیم نمایش بصری annotation ، بر روی سطح نقشه استفاده می شود . (این view ، یک annotation view است.)

iOS همراه با یک شیء داخلی annotation می باشد –  MKPointAnnotation . این شیء ، اجرای خاصی از پروتکل MKAnnotation را فراهم می سازد. با استفاده از این شیء ساده ، می توانیم از تعاریف خودمان ، هر زمان که می خواهیم ، یک نقطه را بر روی نقشه ، با یک عنوان خاص مرتبط سازیم ، استفاده کنیم.

در این آموزش ، مطالب آموزشی را ساده نگه می داریم و از شیء MKPointAnnotation ، برای برقراری ارتباط با مکان کاربر استفاده می کنیم. متد “didUpdateUserLocation” را به روز رسانی می کنیم:

- (void)mapView:(MKMapView *)mapView didUpdateUserLocation:(MKUserLocation *)userLocation
{
    MKCoordinateRegion region = MKCoordinateRegionMakeWithDistance(userLocation.coordinate, 800, 800);
    [self.mapView setRegion:[self.mapView regionThatFits:region] animated:YES];
 
    // Add an annotation
    MKPointAnnotation *point = [[MKPointAnnotation alloc] init];
    point.coordinate = userLocation.coordinate;
    point.title = @"Where am I?";
    point.subtitle = @"I'm here!!!";
    
    [self.mapView addAnnotation:point];
}

برای قرار دادن یک پین در موقعیت فعلی بر روی نقشه ، ابتدا ، یک شیء MKPointAnnotation را ایجاد می کنیم و آن را به مختصات موقعیت فعلی کاربر تخصیص می دهیم. هم چنین ، یک عنوان و زیر عنوان مشخص می کنیم که در هنگام ضربه زدن بر روی پین ، نمایان می شود. متد addAnnotation: را برای افزودن شیء annotation ، در map view فراخوانی می کنیم.

تست مجدد اپ

با اجرای دوباره اپ ، یک پین بر روی مکان فعلی قرار داده می شود. ضربه زدن بر روی پین ، دو عبارت را نمایش می دهد: “Where am I?” و “I’m here!!!”.

هنگام اجرای اپ ، سعی می کنیم با استفاده از کلیدهای اشاره ، در بالای ناحیه debug در نوار بالا ، مکان فعلی را به مکان های دیگر تغییر دهیم.

به محض این که موقعیت تغییر می یابد ، اپ نیز فوراً ، موقعیت مکانی کاربر را به روز رسانی می کند.

خلاصه

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