我已成功实施Google地图导航服务api：https://developers.google.com/maps/documentation/javascript/directions并启用了“draggble”选项。如果在两个地点之间有多条路线可用，是否可以一起显示所有路线？Google Maps API v3 - 具有可拖动替代路线的路线

当前的代码类似于：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>

请帮助我。提前致谢！

来源

2017-02-02 Sankar V

你可以加上你的代码的问题，请 – duncan

@duncan代码为https://developers.google.com给出的代码几乎相同/地图/文档/ JavaScript的/示例/方向-拖动。用户可以动态添加位置数量。正如你可以在链接中看到的：'display.setDirections（response）;'函数创建路径，与我的一样。 –

“用户可以动态地添加地点的数量” - 这不是Google的示例代码所做的事情，而且它们没有像您那样使用重复标记的问题。只需将您的代码添加到问题中，而不是让我们尝试以不同方式猜测您的操作。 – duncan

每次绘制的路线是可编辑的，具有开始和结束标志，这意味着你将永远拖着路由标记的一个，而不是一下子。您可以使用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: 200px; }

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

JSFiddle demo

来源

2017-02-03 18:48:07 MrUpsidown

非常感谢。祝你今天愉快：）！ –

Google Maps API v3 - 具有可拖动替代路线的路线

初始视图：

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

回答

相关问题