如何在GMSMapView中获取animation折线路线,以便在地图移动时与地图一起移动?

我已经通过下面的代码创build了像CAShapeLayer这样的animation折线,我已经将CAShapeLayer作为子图层添加到GMSMapiew中,但是如果我移动地图,图层将不会移动。 在哪里添加图层,让它随着地图一起移动?

func layer(from path: GMSPath) -> CAShapeLayer { let breizerPath = UIBezierPath() let firstCoordinate: CLLocationCoordinate2D = path.coordinate(at: 0) breizerPath.move(to: self.mapView.projection.point(for: firstCoordinate)) for i in 1 ..< Int((path.count())){ print(path.coordinate(at: UInt(i))) let coordinate: CLLocationCoordinate2D = path.coordinate(at: UInt(i)) breizerPath.addLine(to: self.mapView.projection.point(for: coordinate)) } let shapeLayer = CAShapeLayer() shapeLayer.path = breizerPath.reversing().cgPath shapeLayer.strokeColor = UIColor.green.cgColor shapeLayer.lineWidth = 4.0 shapeLayer.fillColor = UIColor.clear.cgColor shapeLayer.lineJoin = kCALineJoinRound shapeLayer.lineCap = kCALineCapRound shapeLayer.cornerRadius = 5 return shapeLayer } func animatePath(_ layer: CAShapeLayer) { let pathAnimation = CABasicAnimation(keyPath: "strokeEnd") pathAnimation.duration = 6 //pathAnimation.delegate = self pathAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) pathAnimation.fromValue = Int(0.0) pathAnimation.toValue = Int(1.0) pathAnimation.repeatCount = 100 layer.add(pathAnimation, forKey: "strokeEnd") } 

通过添加到GoogleMapView

  let shapelayer: CAShapeLayer = self.layer(from: path!) self.animatePath(shapelayer) self.mapView.layer.addSublayer(shapelayer) 

我得到以下输出

我用pathcoordinate创buildGMSPathanimation

在这里输入图像说明

目标C

接口

 @interface MapWithTracking () @property (weak, nonatomic) IBOutlet GMSMapView *mapView; @property (nonatomic,strong) GMSMutablePath *path2; @property (nonatomic,strong)NSMutableArray *arrayPolylineGreen; @property (nonatomic,strong) GMSPolyline *polylineBlue; @property (nonatomic,strong) GMSPolyline *polylineGreen; @end 

履行

 -(void)viewDidLoad { _arrayPolylineGreen = [[NSMutableArray alloc] init]; _path2 = [[GMSMutablePath alloc]init]; } 

获取一个GMSPath并创build一个蓝色多段线。

 -(void)createBluePolyline(GMSPath *path) { // Here create a blue poly line _polylineBlue = [GMSPolyline polylineWithPath:path]; _polylineBlue.strokeColor = [UIColor blueColor]; _polylineBlue.strokeWidth = 3; _polylineBlue.map = _mapView; // animate green path with timer [NSTimer scheduledTimerWithTimeInterval:0.003 repeats:true block:^(NSTimer * _Nonnull timer) { [self animate:path]; }]; } 

使绿色折线animation

将坐标添加到path2并分配给地图

 -(void)animate:(GMSPath *)path { dispatch_async(dispatch_get_main_queue(), ^{ if (i < path.count) { [_path2 addCoordinate:[path coordinateAtIndex:i]]; _polylineGreen = [GMSPolyline polylineWithPath:_path2]; _polylineGreen.strokeColor = [UIColor greenColor]; _polylineGreen.strokeWidth = 3; _polylineGreen.map = _mapView; [arrayPolylineGreen addObject:_polylineGreen]; i++; } else { i = 0; _path2 = [[GMSMutablePath alloc] init]; for (GMSPolyline *line in arrayPolylineGreen) { line.map = nil; } } }); } 

迅速

Declartion

 var polyline = GMSPolyline() var animationPolyline = GMSPolyline() var path = GMSPath() var animationPath = GMSMutablePath() var i: UInt = 0 var timer: Timer! 

对达尔路线

 func drawRoute(routeDict: Dictionary<String, Any>) { let routesArray = routeDict ["routes"] as! NSArray if (routesArray.count > 0) { let routeDict = routesArray[0] as! Dictionary<String, Any> let routeOverviewPolyline = routeDict["overview_polyline"] as! Dictionary<String, Any> let points = routeOverviewPolyline["points"] self.path = GMSPath.init(fromEncodedPath: points as! String)! self.polyline.path = path self.polyline.strokeColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5) self.polyline.strokeWidth = 3.0 self.polyline.map = self.mapView self.timer = Timer.scheduledTimer(timeInterval: 0.003, target: self, selector: #selector(animatePolylinePath), userInfo: nil, repeats: true) } } 

为animationpath

 func animatePolylinePath() { if (self.i < self.path.count()) { self.animationPath.add(self.path.coordinate(at: self.i)) self.animationPolyline.path = self.animationPath self.animationPolyline.strokeColor = UIColor.black self.animationPolyline.strokeWidth = 3 self.animationPolyline.map = self.mapView self.i += 1 } else { self.i = 0 self.animationPath = GMSMutablePath() self.animationPolyline.map = nil } } 

不要忘记停止定时器在viewWillDisappear

 self.timer.invalidate() 

产量

在这里输入图像说明

每当地图移动时通过实现委托mapView:didChangeCameraPosition:移动图层。

你需要为此使用GMSPolyline 。 创build一个GMSPolyline实例,将你的GMSMapView实例设置为它的父映射。

 GMSPolyline* routeOverlay = // config routeOverlay.map = // my GMSMapView instance 

就这样。 你不需要做任何额外的事情,使它与地图相机的运动。 它会自动执行。