在Google地图上的两点之间显示多条路线 [英] Display multiple routes between two points on Google Maps

问题描述

我想在Google地图上的两个位置之间显示多条路线.结果包含3个DirectionsRoutes. directionsRenderer1.setDirections(result)显示第一条路线.控制台显示routeindex1 =0.

I want to display multiple routes between two locations on google maps. result contains 3 DirectionsRoutes. directionsRenderer1.setDirections(result) displays the first route. console prints routeindex1 = 0.

在第15行，控制台显示routeindex2 =1.但是，在第16行，directionsRenderer2.setDirections(result)在第一条路线的顶部显示相同的路线.在第17行，控制台将打印routeindex2 =0.如何显示其他路由?

At line 15, console prints routeindex2 = 1. However, at line 16, directionsRenderer2.setDirections(result) displays the identical route on top of the first route. At Line 17, console prints routeindex2 = 0. How do I display the other route?

 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
 }

推荐答案

默认情况下，DirectionsRenderer呈现路线0.似乎可以做到这一点，而与routeIndex的初始设置值无关.如果您将路线索引设置为方向，则可以使用.

The DirectionsRenderer renders route 0 by default. Seem to do that regardless of an initially set value of the routeIndex. If you set the route index with the directions, it works.

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

概念提琴证明

代码段:

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

这篇关于在Google地图上的两点之间显示多条路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！