在 SDK Google Maps 中快速绘制多边形/形状

Question

我正在使用 Google Maps SDK 在 swift 3.0 中开发应用程序。我不得不说这是我第一次使用这个 SDK，所以我需要一点帮助。我想我问你的对你来说会很容易。我想要做的是当用户进入地图编辑模式时（比如这个页面http://www.birdtheme.org/useful/v3tool.html）。他可以做两件事：

• 首先，他可以在地图上绘制多边形（以标记农田的边界）。我希望用户按下地图上的一个点并生成一条线，直到下一个点。这样，他将生成线条，直到多边形闭合。 我的绘制多边形的代码附在下面。但问题是它永远不会关闭多边形。但问题是我想要它当线条的开头和结尾被触摸或线条交叉时，关闭多边形。我该怎么做它？正如你在图片中看到的，我可以画出无限的线条。

  let pathEditField = GMSMutablePath()
  func mapView(_ mapView: GMSMapView, didTapAt coordinate: CLLocationCoordinate2D) {
  
      if modeEditing {
          pathEditField.add(coordinate)
          let polyline = GMSPolyline(path: pathEditField)
          polyline.map = mapView
  
      }
  }
  

• 其次，一旦绘制了多边形，顶点就会以某种方式突出显示，然后您可以移动该顶点以完成调整。

我给你留下一个截图，以便你了解用户可以在哪里创建多边形以及在哪里调整顶点。

问题是我不知道该怎么做，除了找不到它的文档。我的问题是，你知道任何类似的教程吗？或者你可以不写就开始一点代码吗？

用户可以通过创建一个多边形并随后对其进行调整来确定他的地块的范围。

非常感谢。

Answer 1

使用此代码创建多边形GoogleMaps documentaion

 let camera = GMSCameraPosition.camera(withLatitude: 76.0,
                                          longitude: 87.0,
                                          zoom: 18)
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)

    let path = GMSMutablePath()
    //Add vertex's to Path like as shown bellow
    //get vertices from map
   // https://developers.google.com/maps/documentation/ios-sdk/shapes

let path = GMSMutablePath()
path.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))
path.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.0))
path.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.2))
path.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.2))
path.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))

    let polyline = GMSPolyline(path: path)
    polyline.strokeColor = .blue
    polyline.strokeWidth = 5.0
    polyline.map = mapView

Answer 2

在 swift 5 中你可以像下面这样使用。 您的图像如下所示

1. 将 pod 添加到您的项目中

   pod 'GoogleMaps' pod 'GooglePlaces'

2. 在 AppDelegate 中添加来自谷歌的 api 密钥，如下所示

   func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
   
     GMSServices.provideAPIKey("Your api key")
     GMSPlacesClient.provideAPIKey("your api key")
   
    return true
   }
   

3. 将 GMSMapView 添加到您的视图并连接到 viewController

4. 将下面的代码粘贴到您的 viewCotroller 中

   导入 UIKit

   import GoogleMaps
   
   import GooglePlaces
   
    class ViewController: UIViewController {
   
    @IBOutlet weak var mapView: GMSMapView!    
   
   override func viewDidLoad() {
     super.viewDidLoad()
   
    let camera = GMSCameraPosition.camera(withLatitude: 37.4, longitude:-122.0, zoom: 10)
   let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
   mapView.isMyLocationEnabled = true
   //mapView.myLocationEnabled = true
   mapView.settings.myLocationButton = true;
   self.view = mapView
   
   // Creates a marker in the center of the map.
   let marker = GMSMarker()
   marker.position = CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0)
   marker.title = "Bangladesh"
   //marker.snippet = "Malaysia"
   marker.map = mapView
   
   // Create a rectangular path
   let rect = GMSMutablePath()
   rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))
   rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.0))
   rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.2))
   rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.2))
   
   // Create the polygon, and assign it to the map.
   let polygon = GMSPolygon(path: rect)
   polygon.fillColor = UIColor(red: 0.25, green: 0, blue: 0, alpha: 0.05);
   polygon.strokeColor = UIColor.init(hue: 210, saturation: 88, brightness: 84, alpha: 1)
   //polygon.strokeColor = .black
   polygon.strokeWidth = 2
   polygon.map = mapView
   
     }
   
    }
   

   您可以从 GitHub 下载完整源代码：GitHub 链接：https://github.com/enamul95/GoogleMapPolyLine

Answer 3

适用于 iOS 的 Google Maps sdk 提供了一个名为

的类

GMS多边形

它提供了您正在搜索的功能。

只需为初始化器提供一个

GMSMutablePath

包含多边形的坐标。

let polygon = GMSPolygon(path: path)
polygon.strokeColor = .red
polygon.fillColor = .blue
polygon.strokeWidth = 1.0
polygon.map = mapView