如何在Google Map中从源到目标绘制多个可能的路线 [英] How to Draw Multiple Possible Routes in Google Map from Source to Destination

问题描述

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

这里是 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（地图）; calcRoute（）;}函数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（开始）; 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>  
 

解决方案

一般的答案是使用 provideRouteAlternatives：true ，但是您无法获得具有航点的替代路线，导航服务不会提供他们。

i am not able get more than one possible routes from source to destination.

Here is jsfillder which also used for single line draw but i want to draw for multiple possible route.

code snippet (from fiddle above):

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>

解决方案

The general answer is use provideRouteAlternatives:true, however you can't get alternative routes with waypoints, the directions service won't provide them.

这篇关于如何在Google Map中从源到目标绘制多个可能的路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！