像Uber iOS应用程序一样在地图上移动注释 [英] Move the annotation on Map like Uber iOS application

问题描述

我正在做一个项目，我需要创建一个与UBER和OLA类似的iOS应用程序，其中汽车根据位置在移动.我正在寻找某种图书馆，就像OLA一样，它可以使汽车行驶并平稳地转弯.现在，我已经能够将汽车从一个经度移动到另一个经度.但是最复杂的部分是如何在转向方向时确保汽车面向前方.

请找到以下相同的屏幕截图.

解决方案

实际上，我在以前的iOS应用程序中也有一个要求，因此请找到下面的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 Map(Objective-C)的链接: https://www.dropbox.com/s/4jj8em1o786qa9j/TestAnnotationMoving.zip?dl=0

---

对于Google Map

Google地图链接: https://www.dropbox.com/s/a5ts108lh5rr1gd/GoogleMap. zip?dl = 0

如何运行项目?

1. 从上面的保管箱链接下载项目.
2. 通过链接获取MapsAPIKey.
3. 运行可可豆荚以安装适用于iOS的Google Map SDK.

创建GMSMarker的对象.

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

获取两个位置之间的角度并将其应用于计算角度，请使用上面的函数.

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

在苹果地图中 .transform 需要弧度，而在谷歌地图中 .rotation 需要度数.

请找到下面的GIF表示形式，以及它在地图上的外观.

为实现此功能，我创建了.csv文件，在其中添加了1000条纬度和经度记录.

注意:您会根据位置获得角度，因此有时由于位置而导致您无法获得正确的角度，因为它完全取决于您的位置.

我希望它对您有用！

I am working on a project where I need to create a 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 turns smoothly just like OLA. For now, I was able to move the car from one latitude-longitude to another. But the complex part is how to turn and make sure the car face to the front when moving to the direction.

Please find the below screenshot for the same.

解决方案

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

Environment: Xcode 11 and Swift 5

Link: https://github.com/ram2386/Track-Car

Highlight of the code in which I had done it.

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

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

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

---

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 the above dropbox link.
2. Get the MapsAPIKey from the link.
3. Run the cocoa pods 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 locations 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.

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 totally depends on your location.

I hope it works for you!!!

这篇关于像Uber iOS应用程序一样在地图上移动注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！