如何在iOS上的谷歌地图上进行徒手画？

在绘图应用程序中，我们可以识别用户何时开始绘制和移动手指以形成线条/形状。 我想在地图上做同样的事情，我该怎么做？

Answer 1

基本步骤将涉及：

1） 每当用户开始绘制时添加叠加视图。

lazy var canvasView:CanvasView = { var overlayView = CanvasView(frame: self.googleMapView.frame) overlayView.isUserInteractionEnabled = true overlayView.delegate = self return overlayView }() @IBAction func drawActn(_ sender: AnyObject?) { self.coordinates.removeAll() self.view.addSubview(canvasView) let origImage = UIImage(named: "pen") let tintedImage = origImage?.withRenderingMode(UIImageRenderingMode.alwaysTemplate) drawBtn.setImage(tintedImage, for: .normal) drawBtn.tintColor = UIColor.white drawBtn.backgroundColor = UIColor.red } 

2） 在叠加视图中进行自由手绘 。

 class CanvasView: UIImageView { weak var delegate:NotifyTouchEvents? var lastPoint = CGPoint.zero let brushWidth:CGFloat = 3.0 let opacity :CGFloat = 1.0 override func touchesBegan(_ touches: Set, with event: UIEvent?) { if let touch = touches.first { self.delegate?.touchBegan(touch: touch) lastPoint = touch.location(in: self) } } override func touchesMoved(_ touches: Set, with event: UIEvent?) { if let touch = touches.first { self.delegate?.touchMoved(touch: touch) let currentPoint = touch.location(in: self) drawLineFrom(fromPoint: lastPoint, toPoint: currentPoint) lastPoint = currentPoint } } override func touchesEnded(_ touches: Set, with event: UIEvent?) { if let touch = touches.first { self.delegate?.touchEnded(touch: touch) } } func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) { UIGraphicsBeginImageContext(self.frame.size) let context = UIGraphicsGetCurrentContext() self.image?.draw(in: CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height)) context?.move(to: fromPoint) context?.addLine(to: toPoint) context?.setLineCap(.round) context?.setLineWidth(brushWidth) context?.setStrokeColor(UIColor.black.cgColor) context?.setBlendMode(.normal) context?.strokePath() self.image = UIGraphicsGetImageFromCurrentImageContext() self.alpha = opacity UIGraphicsEndImageContext() } } 

3） 使用委托模式从OverlayView到Controller获取数组中的所有坐标

 //MARK: GET DRAWABLE COORDINATES extension ViewController:NotifyTouchEvents{ func touchBegan(touch:UITouch){ let location = touch.location(in: self.googleMapView) let coordinate = self.googleMapView.projection.coordinate(for: location) self.coordinates.append(coordinate) } func touchMoved(touch:UITouch){ let location = touch.location(in: self.googleMapView) let coordinate = self.googleMapView.projection.coordinate(for: location) self.coordinates.append(coordinate) } func touchEnded(touch:UITouch){ let location = touch.location(in: self.googleMapView) let coordinate = self.googleMapView.projection.coordinate(for: location) self.coordinates.append(coordinate) createPolygonFromTheDrawablePoints() } } 

4） 将坐标更改为多边形 。

  func createPolygonFromTheDrawablePoints(){ let numberOfPoints = self.coordinates.count //do not draw in mapview a single point if numberOfPoints > 2 { addPolyGonInMapView(drawableLoc: coordinates) }//neglects a single touch coordinates = [] self.canvasView.image = nil self.canvasView.removeFromSuperview() let origImage = UIImage(named: "pen") let tintedImage = origImage?.withRenderingMode(UIImageRenderingMode.alwaysTemplate) drawBtn.setImage(tintedImage, for: .normal) drawBtn.tintColor = UIColor.red drawBtn.backgroundColor = UIColor.white } func addPolyGonInMapView( drawableLoc:[CLLocationCoordinate2D]){ isDrawingModeEnabled = true let path = GMSMutablePath() for loc in drawableLoc{ path.add(loc) } let newpolygon = GMSPolygon(path: path) newpolygon.strokeWidth = 3 newpolygon.strokeColor = UIColor.black newpolygon.fillColor = UIColor.black.withAlphaComponent(0.5) newpolygon.map = googleMapView if cancelDrawingBtn.isHidden == true{ cancelDrawingBtn.isHidden = false } userDrawablePolygons.append(newpolygon) addPolygonDeleteAnnotation(endCoordinate: drawableLoc.last!,polygon: newpolygon) } 

我在Swift 3中创建了一个用于在Google Map上绘制/删除多个多边形的演示项目。

请记住在AppDelegate中设置API密钥并更改捆绑包标识符以运行项目。

Answer 2

Map Kit折线或多边形绘图 – https://github.com/tazihosniomar/MapKitDrawing

此链接包含用于在Apple Map上绘制多边形的演示项目。 但是，Google Map View的逻辑仍然相同。 因此，您可以从中复制实现逻辑并将其应用于Google Map。

我希望这能帮到您。

Answer 3

要画线，请使用polyline 。 请参阅Google地图形状 。

要使用polyline您需要提供locatoin坐标。 要将屏幕上的点转换为坐标，请使用GMSProjection类的coordinateForPoint:(CGPoint)point方法。

Polyline实际上在两个坐标之间绘制一条线。 因此，移动mapView时，这些线条也会移动。 我想这就是你想要的。