如何沿多段线精确移动标记?
How to Move marker exactly along Polyline?
Marker Movement from source to destination
显示标记移动的图像,它是一条直线,标记仅在一个方向上。
我想沿着折线移动我的标记,标记方向应该随着折线方向而改变。如何实现这一目标。
我现在的代码是这样的:
class MapScreenVC: BaseVC {
var path = GMSMutablePath()
var arrayCoordinates : [CLLocationCoordinate2D] = []
var destCoord = CLLocationCoordinate2D()
var marker = GMSMarker()
var mapView : GMSMapView? = nil
override func viewDidLoad() {
super.viewDidLoad()
let camera = GMSCameraPosition.camera(withLatitude: 53.4545, longitude: -2.1811, zoom: 14)
mapView = GMSMapView.map(withFrame: .zero, camera: camera)
marker = GMSMarker()
marker.position = CLLocationCoordinate2DMake(53.4387, -2.1827)
marker.title = "Source"
marker.snippet = "Source"
marker.icon = UIImage(named: "car")
marker.map = mapView
let DestinationMarker = GMSMarker()
self.destCoord = CLLocationCoordinate2DMake(53.4645, -2.1873)
DestinationMarker.position = CLLocationCoordinate2DMake(53.4643, -2.1869)
DestinationMarker.title = "Destination"
DestinationMarker.snippet = "Destination"
DestinationMarker.icon = UIImage(named: "home")
DestinationMarker.map = mapView
// 折线
path.addLatitude(53.4395, longitude:-2.1834)
path.addLatitude(53.4403, longitude:-2.1854)
path.addLatitude(53.4414, longitude:-2.1852)
path.addLatitude(53.4428, longitude:-2.1832)
path.addLatitude(53.4442, longitude:-2.1818)
path.addLatitude(53.4449, longitude:-2.1801)
path.addLatitude(53.4478, longitude:-2.1793)
path.addLatitude(53.4504, longitude:-2.1798)
path.addLatitude(53.4526, longitude:-2.1806)
path.addLatitude(53.4545, longitude:-2.1811)
path.addLatitude(53.4564, longitude:-2.1811)
path.addLatitude(53.4584, longitude:-2.1811)
path.addLatitude(53.4601, longitude:-2.1811)
path.addLatitude(53.4617, longitude:-2.1821)
path.addLatitude(53.4630, longitude:-2.1829)
path.addLatitude(53.4632, longitude:-2.1851)
path.addLatitude(53.4635, longitude:-2.1869)
path.addLatitude(53.4638, longitude:-2.1882)
path.addLatitude(53.4645, longitude:-2.1873)
let polyline = GMSPolyline(path: path)
polyline.strokeColor = .blue
polyline.strokeWidth = 6.0
polyline.geodesic = true
polyline.map = mapView
updateMarker(coordinates: destCoord)
view = mapView
}
func updateMarker(coordinates: CLLocationCoordinate2D) {
CATransaction.begin()
CATransaction.setAnimationDuration(10.0)
marker.position = coordinates
CATransaction.commit()
}
}
我不熟悉可以为您提供此功能的库或类似库,因此我将概述一种手动方法,您可以使用它来轻松地完成此操作。
要在折线上移动标记,您需要计算标记从每个点到达下一个点所需的步数。
一种选择是对定义折线的每条线执行以下操作:
1)每2个点定义一条线f(x) = ax + b
如果您在计算直线的斜率时需要帮助,可以进一步阅读 here(上式中的 a
)
2) 定义标记到达该行末尾所采取的步骤。您可以将线的长度除以一个常数,这将得到一个常数 step
。这并不理想,因为跨短线和长线需要相同数量的步骤,但这是一个开始。另请注意,2 lat/lng 点之间的距离在球体上,并不像二维中那样简单。查看 https://en.wikipedia.org/wiki/Haversine_formula 了解更多信息。
3) 将marker放在第一个点(x1,y1)
上,然后移动到(x1+step, f(x1+step))
.
你需要判断在线上是向左移动还是向右移动。
4) 每次移动标记后,检查是否到达当前行的终点,然后重新开始下一行。
Marker Movement from source to destination
显示标记移动的图像,它是一条直线,标记仅在一个方向上。 我想沿着折线移动我的标记,标记方向应该随着折线方向而改变。如何实现这一目标。 我现在的代码是这样的:
class MapScreenVC: BaseVC {
var path = GMSMutablePath()
var arrayCoordinates : [CLLocationCoordinate2D] = []
var destCoord = CLLocationCoordinate2D()
var marker = GMSMarker()
var mapView : GMSMapView? = nil
override func viewDidLoad() {
super.viewDidLoad()
let camera = GMSCameraPosition.camera(withLatitude: 53.4545, longitude: -2.1811, zoom: 14)
mapView = GMSMapView.map(withFrame: .zero, camera: camera)
marker = GMSMarker()
marker.position = CLLocationCoordinate2DMake(53.4387, -2.1827)
marker.title = "Source"
marker.snippet = "Source"
marker.icon = UIImage(named: "car")
marker.map = mapView
let DestinationMarker = GMSMarker()
self.destCoord = CLLocationCoordinate2DMake(53.4645, -2.1873)
DestinationMarker.position = CLLocationCoordinate2DMake(53.4643, -2.1869)
DestinationMarker.title = "Destination"
DestinationMarker.snippet = "Destination"
DestinationMarker.icon = UIImage(named: "home")
DestinationMarker.map = mapView
// 折线
path.addLatitude(53.4395, longitude:-2.1834)
path.addLatitude(53.4403, longitude:-2.1854)
path.addLatitude(53.4414, longitude:-2.1852)
path.addLatitude(53.4428, longitude:-2.1832)
path.addLatitude(53.4442, longitude:-2.1818)
path.addLatitude(53.4449, longitude:-2.1801)
path.addLatitude(53.4478, longitude:-2.1793)
path.addLatitude(53.4504, longitude:-2.1798)
path.addLatitude(53.4526, longitude:-2.1806)
path.addLatitude(53.4545, longitude:-2.1811)
path.addLatitude(53.4564, longitude:-2.1811)
path.addLatitude(53.4584, longitude:-2.1811)
path.addLatitude(53.4601, longitude:-2.1811)
path.addLatitude(53.4617, longitude:-2.1821)
path.addLatitude(53.4630, longitude:-2.1829)
path.addLatitude(53.4632, longitude:-2.1851)
path.addLatitude(53.4635, longitude:-2.1869)
path.addLatitude(53.4638, longitude:-2.1882)
path.addLatitude(53.4645, longitude:-2.1873)
let polyline = GMSPolyline(path: path)
polyline.strokeColor = .blue
polyline.strokeWidth = 6.0
polyline.geodesic = true
polyline.map = mapView
updateMarker(coordinates: destCoord)
view = mapView
}
func updateMarker(coordinates: CLLocationCoordinate2D) {
CATransaction.begin()
CATransaction.setAnimationDuration(10.0)
marker.position = coordinates
CATransaction.commit()
}
}
我不熟悉可以为您提供此功能的库或类似库,因此我将概述一种手动方法,您可以使用它来轻松地完成此操作。
要在折线上移动标记,您需要计算标记从每个点到达下一个点所需的步数。
一种选择是对定义折线的每条线执行以下操作:
1)每2个点定义一条线f(x) = ax + b
如果您在计算直线的斜率时需要帮助,可以进一步阅读 here(上式中的 a
)
2) 定义标记到达该行末尾所采取的步骤。您可以将线的长度除以一个常数,这将得到一个常数 step
。这并不理想,因为跨短线和长线需要相同数量的步骤,但这是一个开始。另请注意,2 lat/lng 点之间的距离在球体上,并不像二维中那样简单。查看 https://en.wikipedia.org/wiki/Haversine_formula 了解更多信息。
3) 将marker放在第一个点(x1,y1)
上,然后移动到(x1+step, f(x1+step))
.
你需要判断在线上是向左移动还是向右移动。
4) 每次移动标记后,检查是否到达当前行的终点,然后重新开始下一行。