Move the annotation on Map like Uber iOS applicati

2019-01-16 06:28发布

I am working on a project where I need to create the similar iOS application to UBER and OLA where the car is moving based on the location. I'm looking for some kind of Library which can make Cars move and take turn smoothly just like OLA. For now I was able to move car from one latitude-longitude to another. But the complex part is how to turn and make sure the car face to front when moving to direction.

Please find the below screenshot for the same.

Screenshot

1条回答
不美不萌又怎样
2楼-- · 2019-01-16 06:40

Actually I had also one requirement in my previous iOS application, so please find the below url for download the code and review it.

Link for iOS Map: https://www.dropbox.com/s/4jj8em1o786qa9j/TestAnnotationMoving.zip?dl=0

Environment : Xcode 8 and Objective-C

Highlight of the code which I had done it.

For accomplished the functionality for moving the car same as Uber iOS application, you need to first calculate the angle between from old location and new location. Please find the below code for how to calculate it.

- (float)angleFromCoordinate:(CLLocationCoordinate2D)first
                toCoordinate:(CLLocationCoordinate2D)second {

    float deltaLongitude = second.longitude - first.longitude;
    float deltaLatitude = second.latitude - first.latitude;
    float angle = (M_PI * .5f) - atan(deltaLatitude / deltaLongitude);

    if (deltaLongitude > 0)      return angle;
    else if (deltaLongitude < 0) return angle + M_PI;
    else if (deltaLatitude < 0)  return M_PI;

    return 0.0f;
}

Then apply the angle to the particular annotation for moving. Please find the below code for the same.

float getAngle = [self angleFromCoordinate:oldLocation toCoordinate:newLocation];

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

//For getting the MKAnnotationView.
AnnotationView *annotationView = (AnnotationView *)[self.mapView viewForAnnotation:myAnnotation];

//Apply the angle for moving the car.
annotationView.transform = CGAffineTransformMakeRotation(getAngle);

For Google Map

Link for google Map: https://www.dropbox.com/s/a5ts108lh5rr1gd/GoogleMap.zip?dl=0

How to run the project?

  1. Download the project from above dropbox link.
  2. Get the MapsAPIKey from the link.
  3. Run the cocoapods to install the google map sdk for iOS.

Create the object of GMSMarker.

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

Get the angle between two location and apply them for calculating the angle please use the above function.

//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);

As in apple map .transform take radian but in google map .rotation takes degree.

Please find the below GIF representation, how it looks on the map.

GIF

For accomplished the functionality I had created the .csv file where I had added 1000 records of latitude and longitude.

Note : You get the angle based on the location, so sometimes it happens you does not get the proper angle due to location as it is totally depend on your location.

Hope it works for you!!!

查看更多
登录 后发表回答