Hatena::ブログ(Diary)

24/7 twenty-four seven Twitter

mail address

Follow me on twitter.

iPhone アプリケーション

Hatena touch LDR touch TV Listings LCD Clock LCD Clock Lite MyWebClip MyWebClip LITE Japan Subway Route Map こころくろっく 英辞郎 on the WEB for iPhone(アルク)
i-Radio くるりんぱ性格診断 英辞郎検索ランキング(アルク) kotobank - コトバンク miil COOKPAD クックパッド のせる トイカメラ - TiltShiftGen2

iPad アプリケーション

LCD Clock HD 「超」整理手帳 for the iPad N+Note for NICOLA

Windows 8 Store アプリケーション

クックパッド

共著

2009-08-12

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

f:id:KishikawaKatsumi:20090812052111p:image:w160 f:id:KishikawaKatsumi:20090812052110p:image:w160 f:id:KishikawaKatsumi:20090812054915p:image:w160


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箇所以上のルートを検索できます。

下の例は、「セルリアンタワー」「東京ドーム」「品川駅」「東京ディズニーランド」を経由するルートです。

f:id:KishikawaKatsumi:20090812054006p:image:w160 f:id:KishikawaKatsumi:20090812054002p:image:w160

まだ、作りかけですが、いろいろ遊べると思います。

よかったら、触ってみてください。


参考リンク