Kesinの知見置き場

知見を共有していきたいじゃないですか

MapKitでピンに合わせて地図の表示領域を自動調節する

前回の記事の続きです


執筆時ではXcode4.4.1でARCを使うコードとなっています。Objective-CXcodeの進化は速いのでこのバージョンより新しい(古い)Xcodeではこの記事の通りにやっても動かない可能性があります。ご注意ください。

ピンが全て表示されるように地図の中心位置と倍率を調整する

普通の地図アプリを使ってて当たり前にある機能なのに、自分で地図アプリを作ろうとすると結構悩む部分だと思います。正直、この機能はAppleが用意してくれてもいいと思うのですが・・・。
この機能を実現するには地図の表示領域を設定するsetRegionに渡すための中心点(center)と倍率(span)を計算で求めます。
地図の中心点は全てのピンから最大最小の緯度経度の4点を求め、その中心になります。
倍率に関しては正直なところMKcoordinateRegionMakeのcenter, spanの関係がイマイチ理解できてないのでちゃんと説明できないのですが、最大緯度から最小緯度への距離と、最大経度から最小経度への距離をspanに入れてやればOKなようです。
というわけでコードにするとこんな感じです

double minLat = 9999.0;
double minLng = 9999.0;
double maxLat = -9999.0;
double maxLng = -9999.0;
double lat, lng;
for (id<MKAnnotation> annotation in mapView.annotations){
    lat = annotation.coordinate.latitude;
    lng = annotation.coordinate.longitude;
    //緯度の最大最小を求める
    if(minLat > lat)
        minLat = lat;
    if(lat > maxLat)
        maxLat = lat;
   
    //経度の最大最小を求める
    if(minLng > lng)
        minLng = lng;
    if(lng > maxLng)
        maxLng = lng;
}
CLLocationCoordinate2D center = CLLocationCoordinate2DMake((maxLat + minLat) / 2.0, (maxLng + minLng) / 2.0);
MKCoordinateSpan span = MKCoordinateSpanMake(maxLat - minLat, maxLng - minLng);
MKCoordinateRegion region = MKCoordinateRegionMake(center, span);
 
[mapView setRegion:[mapView regionThatFits:region] animated:YES];


博多駅、新大坂駅、東京駅、新青森駅にピンを表示させて上のコードで地図を自動調節させるとこんな感じです。ここから博多駅のピンを消去し、もう一度地図の表示を調節させます。

新大森駅のピンがちょっとはみ出てますが、だいたい期待した表示でしょう。今度は新青森駅のピンを削除します。

今度もOKですね。横の余白の広さも自分的には調度良いと感じますが、気になる方はspanに適当な値をかけると調整できるかと思います。
ちなみに、新大阪駅のピンも削除すると、

東京駅に最大ズームされてしまいます^^; ピンの数が1つのときだけは独自に適当なspanを設定する必要があるかと思います。


今回は静止画でしか地図の表示が変わる様子をお見せできませんでしたが、実際に動かしてみると地図がヌルヌルと調度良い位置、倍率に調整されるので気持ちいいです。ぜひ試してみてください。