Question

我想在谷歌地图上的两个位置之间显示多条路线。结果包含3个DirectionsRoutes。 directionsRenderer1.setDirections（result）显示第一条路线。控制台打印routeindex1 = 0.

在第15行，控制台打印routeindex2 = 1.但是，在第16行，directionsRenderer2.setDirections（result）在第一条路线的顶部显示相同的路线。在第17行，控制台打印routeindex2 = 0.如何显示其他路径？

 function renderDirections(result,map) {
   directionsRenderer1 = new google.maps.DirectionsRenderer({
      routeIndex: 0,
      polylineOptions: {strokeColor: "green"}
    });
   directionsRenderer1.setMap(map);
   directionsRenderer1.setDirections(result);
   console.log("routeindex1 = ",directionsRenderer1.getRouteIndex());

   directionsRenderer2 = new google.maps.DirectionsRenderer({
      routeIndex: 1,
      polylineOptions: {strokeColor: "blue"}
    });
   directionsRenderer2.setMap(map);
   console.log("routeindex2 = ",directionsRenderer2.getRouteIndex()); //line 15
   directionsRenderer2.setDirections(result);  //line 16 
   console.log("routeindex2 = ",directionsRenderer2.getRouteIndex()); //line 17
 }

Answer 1

DirectionsRenderer默认渲染路由0。无论routeIndex的初始设置值如何，似乎都是这样做的。如果您使用路线设置路线索引，则可以正常工作。

var directionsRenderer1 = new google.maps.DirectionsRenderer({
  directions: result,
  routeIndex: 0,
  map: map,
  polylineOptions: {
    strokeColor: "green"
  }
});

var directionsRenderer2 = new google.maps.DirectionsRenderer({
  directions: result,
  routeIndex: 1,
  map: map,
  polylineOptions: {
    strokeColor: "blue"
  }
});

proof of concept fiddle

代码段

function renderDirections(result, map) {
  var directionsRenderer1 = new google.maps.DirectionsRenderer({
    directions: result,
    routeIndex: 0,
    map: map,
    polylineOptions: {
      strokeColor: "green"
    }
  });
  console.log("routeindex1 = ", directionsRenderer1.getRouteIndex());

  var directionsRenderer2 = new google.maps.DirectionsRenderer({
    directions: result,
    routeIndex: 1,
    map: map,
    polylineOptions: {
      strokeColor: "blue"
    }
  });
  console.log("routeindex2 = ", directionsRenderer2.getRouteIndex()); //line 17
}

function calculateAndDisplayRoute(origin, destination, directionsService, directionsDisplay, map) {
  directionsService.route({
    origin: origin,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING,
    provideRouteAlternatives: true
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      renderDirections(response, map);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

function initialize() {
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(new google.maps.LatLng(51.61793418642200, -0.13678550737318), new google.maps.LatLng(51.15788846699750, -0.16364536053269), directionsService, directionsDisplay, map);


}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Answer 2

func drawMutliplePath()
{
    let origin = "\(startLocation.coordinate.latitude),\(startLocation.coordinate.longitude)"
    let destination = "\(destinationLocation.coordinate.latitude),\(destinationLocation.coordinate.longitude)"
    print("origin: \(origin)")
    print("destination: \(destination)")
    let urlString = "https://maps.googleapis.com/maps/api/directions/json?origin=\(origin)&destination=\(destination)&mode=driving&key=\(APIKEY)&alternatives=true"
    print("urlString: \(urlString)")
    let url = URL(string: urlString)
    URLSession.shared.dataTask(with: url!, completionHandler: {
        (data, response, error) in
        if(error != nil){
            print("error")
        }else{
            do{
                let json = try JSONSerialization.jsonObject(with: data!, options:.allowFragments) as! [String : AnyObject]
                let routes = json["routes"] as! NSArray
                self.mapView.clear()

                OperationQueue.main.addOperation({
                    var i = 1
                    for route in routes
                    {
                        let routeOverviewPolyline:NSDictionary = (route as! NSDictionary).value(forKey: "overview_polyline") as! NSDictionary
                        let points = routeOverviewPolyline.object(forKey: "points")
                        let path = GMSPath.init(fromEncodedPath: points! as! String)
                        let polyline = GMSPolyline.init(path: path)
                        polyline.strokeWidth = 3

                        if i == 1
                        {
                            polyline.strokeColor = UIColor.green
                        }else if i == 2
                        {
                            polyline.strokeColor = UIColor.blue
                        }else
                        {
                            polyline.strokeColor = UIColor.red
                        }

                        i = i+1
                        let bounds = GMSCoordinateBounds(path: path!)
                        self.mapView!.animate(with: GMSCameraUpdate.fit(bounds, withPadding: 30.0))

                        polyline.map = self.mapView

                    }
                    self.marker = GMSMarker(position: self.startLocation.coordinate)
                    self.marker.map = self.mapView
                    self.marker.icon = GMSMarker.markerImage(with: UIColor.green)
                    self.destinationMarker = GMSMarker(position: self.destinationLocation.coordinate)
                    self.destinationMarker.map = self.mapView
                    self.destinationMarker.icon = GMSMarker.markerImage(with: UIColor.red)
                })
            }catch let error as NSError{
                print("error:\(error)")
            }
        }
    }).resume()
}

在Google地图上显示两个点之间的多条路线

2 个答案: