如何在Google Map中从源到目标绘制多个可能的路径

时间:2016-08-09 05:39:11

标签: javascript google-maps

我无法从源到目的地获得多条可能的路线。

这里是jsfillder,也用于单线绘制,但我想绘制多种可能的路线。

代码段(来自小提琴):



var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
  });

  var myOptions = {
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }

  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  directionsDisplay.setMap(map);
  calcRoute();
}

function calcRoute() {

  var waypts = [];

  stop = new google.maps.LatLng(51.943571, 6.463856)
  waypts.push({
    location: stop,
    stopover: true
  });
  stop = new google.maps.LatLng(51.945032, 6.465776)
  waypts.push({
    location: stop,
    stopover: true
  });
  stop = new google.maps.LatLng(51.945538, 6.469413)
  waypts.push({
    location: stop,
    stopover: true
  });
  stop = new google.maps.LatLng(51.947462, 6.467941)
  waypts.push({
    location: stop,
    stopover: true
  });
  stop = new google.maps.LatLng(51.945409, 6.465562)
  waypts.push({
    location: stop,
    stopover: true
  });
  stop = new google.maps.LatLng(51.943700, 6.462096)
  waypts.push({
    location: stop,
    stopover: true
  });

  start = new google.maps.LatLng(51.943382, 6.463116);
  end = new google.maps.LatLng(51.943382, 6.463116);

  createMarker(start);

  var request = {
    origin: start,
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.WALKING
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
    }
  });
}

function createMarker(latlng) {

  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
}

initialize();

#map-canvas {
  height: 400px;
}

<script src="http://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

一般答案是使用provideRouteAlternatives:true,但是你无法获得带路标的替代路线,路线服务将不会提供它们。