web-dev-qa-db-ja.com

Uber iOSアプリケーションのように地図上で注釈を移動します

私は、場所に基づいて車が動いているUBERおよびOLAと同様のiOSアプリケーションを作成する必要があるプロジェクトに取り組んでいます。私はOLAのように車をスムーズに動かしたり曲がったりできるようなライブラリーを探しています。とりあえず、緯度と経度を切り替えることができました。しかし、複雑な部分は、方向を変えるときに、車を前に向ける方法です。

以下のスクリーンショットをご覧ください。

Screenshot

16
Ramesh Sharma

実際、以前のiOSアプリケーションにも要件が1つありました。コードをダウンロードして確認するには、以下のURLを見つけてください。

環境:Xcode 11およびSwift 5

リンク: https://github.com/ram2386/Track-Car

私がそれを実行したコードのハイライト

Uber iOSアプリケーションと同じように車を動かす機能を実現するには、最初に古い場所と新しい場所の間の角度を計算する必要があります。計算方法は以下のコードをご覧ください。

func angleFromCoordinate(firstCoordinate: CLLocationCoordinate2D, 
    secondCoordinate: CLLocationCoordinate2D) -> Double {

    let deltaLongitude: Double = secondCoordinate.longitude - firstCoordinate.longitude
    let deltaLatitude: Double = secondCoordinate.latitude - firstCoordinate.latitude
    let angle = (Double.pi * 0.5) - atan(deltaLatitude / deltaLongitude)

    if (deltaLongitude > 0) {
        return angle
    } else if (deltaLongitude < 0) {
        return angle + Double.pi
    } else if (deltaLatitude < 0) {
        return Double.pi
    } else {
        return 0.0
    }
}

//Apply the angle to the particular annotation for moving
let getAngle = angleFromCoordinate(firstCoordinate: oldLocation, secondCoordinate: newLocation)

//Apply the new location for coordinate
myAnnotation.coordinate = newLocation;

//Getting the MKAnnotationView
let annotationView = self.mapView.view(for: myAnnotation)

//Angle for moving the car
annotationView?.transform = CGAffineTransform(rotationAngle: CGFloat(getAngle))

IOSマップのリンク(Objective-C): https://www.dropbox.com/s/4jj8em1o786qa9j/TestAnnotationMoving.zip?dl=


Googleマップの場合

Googleマップのリンク: https://www.dropbox.com/s/a5ts108lh5rr1Gd/GoogleMap.zip?dl=

プロジェクトを実行するには?

  1. 上記のドロップボックスリンクからプロジェクトをダウンロードします。
  2. link からMapsAPIKeyを取得します。
  3. Cocoaポッドを実行して、iOS用のGoogleマップSDKをインストールします。

GMSMarkerのオブジェクトを作成します。

GMSMarker *marker = [[GMSMarker alloc] init];
marker.position = CLLocationCoordinate2DMake(kCameraLatitude, kCameraLongitude);
marker.map = _mapView;
marker.icon = [UIImage imageNamed:@"carIcon"];

2つの場所の間の角度を取得し、それらを適用して角度を計算します。上記の関数を使用してください。

//Get the angle
float getAngle = [self angleFromCoordinate:oldLocation toCoordinate:newLocation];

//Apply the new coordinate
marker.position = newLocation;

//Apply the angle and convert to degree from radian.
marker.rotation = getAngle * (180.0 / M_PI);

Apple map。transformのように、ラジアンを取るがgoogleマップ。rotation は学位を取ります。

以下のGIF表現を見つけて、地図上でどのように見えるかを確認してください。

GIF

機能を実現するために、緯度と経度の1000レコードを追加した.csvファイルを作成しました。

注:位置に基づいて角度を取得します。そのため、場所に完全に依存するため、場所によっては適切な角度を取得できない場合があります。

私はそれがあなたのために働くことを望みます!!!

51