【问题标题】：Google Maps API v3 - Directions with draggable alternate routesGoogle Maps API v3 - 具有可拖动替代路线的方向
【发布时间】：2017-02-02 10:32:19
【问题描述】：

我已经成功实现了谷歌地图方向服务 api：https://developers.google.com/maps/documentation/javascript/directions 启用了 'draggble' 选项。如果 2 个地点之间有多条路线可用，是否可以同时显示所有路线？

当前代码类似于：https://developers.google.com/maps/documentation/javascript/examples/directions-draggable，并且由于我启用了provideRouteAlternatives: true，因此我在响应代码中确实有可用的替代路由。

我尝试了How to display alternative route using google map api 中提供的解决方案。但是当我使用该代码时，我发现它用独立的标记绘制了多条路线。也就是说，如果有 4 条路线可用，则将有 4 个“A”位置和 4 个“B”位置，并且在拖动时 - 只有其中一个被选中。请找到以下屏幕截图。

初始视图：

拖动初始位置后（重复位置问题）

我需要以这样一种方式拖动，当拖动位置 A 或 B 时，不应该有任何重复，并且应该自动显示备用路线。

我目前的代码如下（此处未添加API密钥）：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Draggable directions</title>
    <style>
      #right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #right-panel select, #right-panel input {
        font-size: 15px;
      }

      #right-panel select {
        width: 100%;
      }

      #right-panel i {
        font-size: 12px;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
        float: left;
        width: 63%;
        height: 100%;
      }
      #right-panel {
        float: right;
        width: 34%;
        height: 100%;
      }
      .panel {
        height: 100%;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="right-panel">
      <p>Total Distance: <span id="total"></span></p>
    </div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: {lat: -24.345, lng: 134.46}  // Australia.
        });

        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer({
          draggable: true,
          map: map,
          panel: document.getElementById('right-panel')
        });

        directionsDisplay.addListener('directions_changed', function() {
          computeTotalDistance(directionsDisplay.getDirections());
        });

        displayRoute('Rosedale, MD, USA', 'Savage, MD, USA', directionsService,
            directionsDisplay);
      }

      function displayRoute(origin, destination, service, display) {
        service.route({
          origin: origin,
          destination: destination,
          travelMode: 'DRIVING',
          avoidTolls: true,
          provideRouteAlternatives: true,
        }, function(response, status) {
          if (status === 'OK') {
            for (var i = 0, len = response.routes.length; i < len; i++) {
                new google.maps.DirectionsRenderer({
                    map: map,
                    directions: response,
                    routeIndex: i,
                    draggable : true,
                });
            }
            display.setDirections(response);
          } else {
            alert('Could not display directions due to: ' + status);
          }
        });
      }

      function computeTotalDistance(result) {
        var total = 0;
        var myroute = result.routes[0];
        for (var i = 0; i < myroute.legs.length; i++) {
          total += myroute.legs[i].distance.value;
        }
        total = total / 1000;
        document.getElementById('total').innerHTML = total + ' km';
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=initMap">
    </script>
  </body>
</html>

请帮助我。提前致谢！

【问题讨论】：

@duncan 代码与developers.google.com/maps/documentation/javascript/examples/… 中给出的代码几乎相同。位置的数量可以由用户动态添加。正如您在该链接中看到的那样：display.setDirections(response); 函数创建路径，与我的相同。
“用户可以动态添加位置的数量” - 这不是 Google 的示例代码正在做的事情，而且他们不会遇到与您一样的重复标记问题。只需将您的代码添加到问题中，而不是让我们再次猜测您的不同之处。
我猜这是因为当您拖动方向标记时，它不会重绘备用路线...
@duncan - 在提供的 Google 示例代码中，中间位置是硬编码的。我刚刚说过，如果需要，用户可以在我的代码中输入这些中间位置。我已经用我的代码更新了这个问题。另外我刚刚发现如果添加了航点，谷歌将只提供一条路线。所以我们需要考虑只有2个位置的情况。请检查并告诉我您的想法。
这能回答你的问题吗？ Google Maps JS API v3 - Simple Multiple Marker Example

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

您绘制的每条路线都是可编辑的，并且都有一个开始和结束标记，这意味着您将始终拖动其中一个路线标记，而不是一次全部拖动。您可以使用 suppressMarkers 选项从备用路线中删除标记，但这不会对行为产生太大影响。

问题在于，由于每条路线都是独立的，如果您移动起点或终点位置，您应该重绘每条路线，否则只有一条路线会更新。

也就是说，如果您编辑路线（而不是更改其开始或结束位置），则不应重新绘制路线。如果您更新开始或结束位置，您当然会丢失您添加的任何路线航路点。除非你为此做点什么……这听起来很痛苦。

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

function initialize() {

  var center = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: center
  }

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

  var start = "Sadulpur, India";
  var end = "New Delhi, India";

  plotDirections(start, end);
}

function plotDirections(start, end) {

  var method = 'DRIVING';

  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode[method],
    provideRouteAlternatives: true
  };

  directionsService.route(request, function(response, status) {

    if (status == google.maps.DirectionsStatus.OK) {

      var routes = response.routes;
      var colors = ['red', 'green', 'blue', 'orange', 'yellow', 'black'];
      var directionsDisplays = [];

      // Reset the start and end variables to the actual coordinates
      start = response.routes[0].legs[0].start_location;
      end = response.routes[0].legs[0].end_location;

      // Loop through each route
      for (var i = 0; i < routes.length; i++) {

        var directionsDisplay = new google.maps.DirectionsRenderer({
          map: map,
          directions: response,
          routeIndex: i,
          draggable: true,
          polylineOptions: {

            strokeColor: colors[i],
            strokeWeight: 4,
            strokeOpacity: .3
          }
        });

        // Push the current renderer to an array
        directionsDisplays.push(directionsDisplay);

        // Listen for the directions_changed event for each route
        google.maps.event.addListener(directionsDisplay, 'directions_changed', (function(directionsDisplay, i) {

          return function() {

            var directions = directionsDisplay.getDirections();
            var new_start = directions.routes[0].legs[0].start_location;
            var new_end = directions.routes[0].legs[0].end_location;

            if ((new_start.toString() !== start.toString()) || (new_end.toString() !== end.toString())) {

              // Remove every route from map
              for (var j = 0; j < directionsDisplays.length; j++) {

                directionsDisplays[j].setMap(null);
              }

              // Redraw routes with new start/end coordinates
              plotDirections(new_start, new_end);
            }
          }
        })(directionsDisplay, i)); // End listener
      } // End route loop
    }
  });
}

initialize();

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

JSFiddle demo

【讨论】：