如何在GMSMapView中获取动画折线路线，以便在地图移动时与地图一起移动？

Question

我已经通过以下代码创建了像CAShapeLayer这样的动画折线，我已经将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) 

Answer 1

我创建GMSPath动画与路径coordinate

目标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并创建一个蓝色折线。

-(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]; 
     }]; 

} 

动画绿色折线

添加坐标路径2，并把映射

-(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; 
      } 

     } 
    }); 
} 

Answer 2

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

Answer 3

您需要为此使用GMSPolyline。创建一个GMSPolyline实例，将您的GMSMapView实例设置为它的父映射。

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

就这样。你不需要做任何额外的事情来使它随着地图相机的移动而移动。它会自动完成。

Answer 4

SWIFT

Declartion

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

要Darw路线

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

动画路径

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

输出