使用 Swift3 在 GMSMapView 上的两个或多个标记之间绘制折线答案

【问题标题】：Draw polylines between two or more marker on GMSMapView with Swift3使用 Swift3 在 GMSMapView 上的两个或多个标记之间绘制折线
【发布时间】：2017-07-16 09:59:18
【问题描述】：

我尝试实施不同的解决方案来在我的 GMSMapView 上的标记之间绘制折线，但无法正常工作。您是否有其他解决方案，或者您知道我的代码有什么问题？

    override func viewDidLoad() {
    super.viewDidLoad()
    let path = GMSMutablePath()
    _data = _modelDelivery.getGarageFromDeliver(refDelivery: _delivery._ref)
    let camera = GMSCameraPosition.camera(withLatitude: 48.853183, longitude: 2.369144, zoom: 13.0)
    self._mapView.camera = camera

    let marker = GMSMarker()
    marker.position = CLLocationCoordinate2D(latitude: 48.8531827, longitude: 2.3691443000000163)
    path.add(marker.position)
    marker.title = "Ma position"
    marker.icon = GMSMarker.markerImage(with: UIColor.blue)
    marker.map = self._mapView

    for elem in _data {
        let address = elem._adress + ", " + elem._city + ", " + String(elem._zipCode) + ", France"
        let geocoder = CLGeocoder()
        geocoder.geocodeAddressString(address) {
            placemarks, error in
            let placemark = placemarks?.first
            let lat = placemark?.location?.coordinate.latitude
            let lon = placemark?.location?.coordinate.longitude
            let marker = GMSMarker()
            marker.position = CLLocationCoordinate2D(latitude: lat!, longitude: lon!)
            path.add(marker.position)
            marker.title = elem._nameOfGarage
            marker.snippet = elem._adress + "\nOrdre de passege : "
            marker.map = self._mapView
        }
    }
    let rectangle = GMSPolyline(path: path)
    rectangle.strokeWidth = 4
    rectangle.strokeColor = UIColor.red
    rectangle.map = self._mapView
}

【问题讨论】：

检查我的答案。

标签： google-maps swift3 google-maps-markers google-polyline gmsmapview

【解决方案1】：

我相信你已经在https://console.developers.google.com 中配置了一切。

我们可以在两个坐标之间画一条折线。您需要在为 GoogleMaps 创建项目的https://console.developers.google.com 上创建 ServerKey，然后在下面的 URL 中使用该服务器密钥。

这会在两个坐标之间绘制折线。

func drawPath() {

    //Taken two source and destinations coordinates. Take the coordinates in this way. "Lat,Long" in a String
    let sourceString = "28.6562,77.2410"
    let destinationString = "27.1750,78.0422"

    //GoogleMaps Web API to draw the polyline   
    let combinedUrl : String = "https://maps.googleapis.com/maps/api/directions/json?" + "origin=\(sourceString)&destination=\(destinationString)&key=YOUR_SERVER_KEY"

    let url = URL(string:combinedUrl)

    let task = URLSession.shared.dataTask(with: url!) { (data:Data?, response:URLResponse?, error:Error?) in

        if error != nil {
            print(error.debugDescription)
            return
        }

        do {
            let json = try JSONSerialization.jsonObject(with: data!, options: .mutableContainers) as! NSDictionary

            //We need to get to the points key in overview_polyline object in order to pass the points to GMSPath.
            let route = (((json.object(forKey: "routes") as! NSArray).object(at: 0) as! NSDictionary).object(forKey: "overview_polyline") as! NSDictionary).value(forKey: "points") as! String

            //Draw on main thread always else it will crash
            DispatchQueue.main.async {
                let path  = GMSPath(fromEncodedPath:route)!
                let polyline  = GMSPolyline(path: path)
                polyline.strokeColor = UIColor.green
                polyline.strokeWidth = 5.0

                //mapView is your GoogleMaps Object i.e. _mapView in your case
                polyline.map = self.mapView
            } 
        } catch {
        }            
    }
    task.resume()        
}

需要 JSON 点关键数据。

稍后您可以使用GMSCameraPosition 为绘制区域的第一个坐标设置动画。

同样对于多个点，只需在for循环中传递各自的坐标并调用drawPath函数即可。

你也可以看看这个Video Tutorial。

【讨论】：