24/7 twenty-four seven

iOS/OS X application programing topics.

MapKitでルート案内をするライブラリを公開しました。


MapKitフレームワーク単体では、標準のマップアプリのようなナビは作れないのですが、Google Maps APIと組み合わせることで、似たような機能を実現してみました。


GitHubのリポジトリで公開しています。
kishikawakatsumi/MapKit-Route-Directions · GitHub


仕組みは、裏でJavascriptを実行して、Google Maps APIを叩いています。
結果としてルートの座標が緯度経度として返ってくるので、その値を使用して、MapViewの上にルートのラインを描画します。
Javascriptの実行エンジンにUIWebViewを使用します。


Google Maps APIのラッパーと、ラインをマップビューの上に描画する拡張から構成されています。


ラインの描画は下記の記事を参考にしました。
The Reluctant Blogger : Drawing polyines or routes on a MKMapView (Using Map Kit on the iPhone)
The Reluctant Blogger : Using MKAnnotation, MKPinAnnotationView and creating a custom MKAnnotationView in an MKMapView


使い方は下記のような感じです。
UICGDirectionsやUICGDirectionsOptionsというクラスがGoogle Maps APIのラッパーです。
APIの実行、および結果の取得に使用します。

NSString *startPoint = [NSString stringWithUTF8String:"セルリアンタワー"]
NSString *endPoint = [NSString stringWithUTF8String:"東京ディズニーランド"];

UICGDirections *diretions = [UICGDirections sharedDirections];
diretions.delegate = self;
UICGDirectionsOptions *options = [[[UICGDirectionsOptions alloc] init] autorelease];

[diretions loadWithStartPoint:startPoint endPoint:endPoint options:options];


以下のデリゲート・メソッドを用意しています。
オブジェクトの初期化の終了時、および結果を取得するたびに呼ばれるメソッドです。

- (void)directionsDidFinishInitialize:(UICGDirections *)directions;
- (void)directions:(UICGDirections *)directions didFailInitializeWithError:(NSError *)error;
- (void)directionsDidUpdateDirections:(UICGDirections *)directions;
- (void)directions:(UICGDirections *)directions didFailWithMessage:(NSString *)message;


マップビューに線を引くには次のようにします。

- (void)directionsDidUpdateDirections:(UICGDirections *)directions {
    // Overlay polylines
    UICGPolyline *polyline = [directions polyline];
    NSArray *routePoints = [polyline routePoints];

    routeOverlayView = [[UICRouteOverlayMapView alloc] initWithMapView:routeMapView];
    [routeOverlayView setRoutes:routePoints];

UICGDirectionsオブジェクトからUICGPolylineオブジェクトを取得します。
UICGPolylineオブジェクトからルートの頂点座標を取り出し、UICRouteOverlayMapViewクラスに渡します。
UICRouteOverlayMapViewクラスが、マップビューの上に線を描画します。


ちょっと面白いところでは3箇所以上のルートを検索できます。
下の例は、「セルリアンタワー」「東京ドーム」「品川駅」「東京ディズニーランド」を経由するルートです。

まだ、作りかけですが、いろいろ遊べると思います。
よかったら、触ってみてください。