Ich habe erfolgreich Google Map Richtung Service API implementiert: https://developers.google.com/maps/documentation/javascript/directions mit 'Draggle' Option aktiviert. Ist es möglich, alle Routen zusammen anzuzeigen, wenn mehrere Routen zwischen 2 Standorten verfügbar sind?Google Maps API v3 - Wegbeschreibung mit ziehbaren alternativen Routen

Der aktuelle Code ist ähnlich wie: https://developers.google.com/maps/documentation/javascript/examples/directions-draggable und ich habe alternative Routen im Antwortcode verfügbar, wie ich provideRouteAlternatives: true aktiviert habe.

Ich versuchte die Lösung in: How to display alternative route using google map api. Aber als ich diesen Code benutzt habe, habe ich herausgefunden, dass er mehrere Routen mit unabhängigen Markern zeichnet. Das heißt, wenn 4 Routen verfügbar sind, gibt es 4 'A' Positionen und 4 'B' Positionen und beim Ziehen wird nur eine ausgewählt. Bitte finden Sie die folgenden Screenshots.

Erste Ansicht:

Nach dem Ziehen Anfangsstellen (Ausgabe mit doppelten Standorten)

Ich brauche so zu ziehen, dass, wenn die Position A oder B wird gezogen, es sollte keine Duplikate geben und alternative Routen sollten automatisch angezeigt werden.

Mein aktueller Code ist wie folgt (API-Schlüssel hier nicht hinzugefügt):

<!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>

Bitten mir helfen. Danke im Voraus!

Quelle

2017-02-02 Sankar V

können Sie Ihren Code auf die Frage fügen Sie bitte – duncan

@duncan der Code ist fast identisch mit dem Code gegeben in https://developers.google.com/maps/documentation/javascript/examples/directions-draggable. Die Anzahl der Standorte kann vom Benutzer dynamisch hinzugefügt werden. Wie Sie in diesem Link sehen können: 'display.setDirections (response);' Funktion erstellt den Pfad, genau wie meiner. –

"Die Anzahl der Speicherorte kann dynamisch vom Benutzer hinzugefügt werden" - das ist nicht der Google-Beispielcode, und sie haben nicht dasselbe Problem mit doppelten Markierungen, die Sie sind. Fügen Sie einfach Ihren Code zur Frage hinzu, anstatt uns zu überlegen, was Sie anders machen. – duncan

Jede Route, die Sie zeichnen, ist editierbar und hat eine Start- und Endmarkierung, was bedeutet, dass Sie immer einen der Routenmarker und nicht alle auf einmal ziehen werden. Sie könnten die Option suppressMarkers verwenden, um Markierungen von den alternativen Routen zu entfernen, aber dies würde sich nicht stark auf das Verhalten auswirken.

Das Problem ist, dass jede Route getrennt ist, wenn Sie die Start- oder Endposition verschieben, sollten Sie jede Route neu zeichnen, sonst wird nur eine aktualisiert.

Das heißt, wenn Sie eine Route bearbeiten (außer durch Ändern der Start- oder Endposition), sollten Sie Ihre Routen nicht neu zeichnen. Wenn Sie den Start- oder Endort aktualisieren, verlieren Sie natürlich jeden von Ihnen hinzugefügten Wegpunkt. Es sei denn, du tust etwas dagegen ... was wie ein Schmerz klingt.

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

Quelle

2017-02-03 18:48:07 MrUpsidown

Vielen Dank. Einen schönen Tag noch :) ! –

Google Maps API v3 - Wegbeschreibung mit ziehbaren alternativen Routen

Erste Ansicht:

Nach dem Ziehen Anfangsstellen (Ausgabe mit doppelten Standorten)

Antwort

Verwandte Themen