Google Map 设置航点可以节省时间

2 回答

• 0

  我想我和Dr.Molle几乎一样（我们开始同时编写这段代码） . 我也从完成到开始迭代 .

  但无论如何我想发布我的代码 .

  我会在几秒钟内完成计算 . 只在最后一刻转换;并且不要使用自定义计算，例如（小时* 3600）...时间很棘手;你没有想到很多例外 .

  <style>
      html {
          height: 100%
      }
      body {
          height: 100%;
          margin: 0px;
          padding: 0px
      }
      .ziel {
          padding: 10px;
          background-color: #0086A9;
          color: #fff;
          font-size: 15px;
          margin-bottom: 10px;
      }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maps.google.com/maps/api/js"></script>
  <div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
  <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
      <div id="directions_panel" style="margin:20px;background-color:#FFEE77;font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;padding:20px;"></div>
      <div style="padding-left:10px;">I want "pick up time" to look like this:
          <br> A to B -> pick up time: 13:12
          <br> B to C -> pick up time: 13:16
          <br> C to D -> pick up time: 13:48
          <br> D to E -> pick up time: 14:20
          <br> E to F -> pick up time: 14:32
          <br> F to G -> pick up time: 14:45
          <br>
          <br> </div>
      <div><strong>Arrival to the last address is   15:00 </strong> </div>
      <br>
      <br>
      <br>
      <div id="total"></div>
  </div>
  <script>
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;
  
      function initialize() {
          directionsDisplay = new google.maps.DirectionsRenderer();
          var chicago = new google.maps.LatLng(41.850033, -87.6500523);
          var myOptions = {
              zoom: 6,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: chicago
          }
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          directionsDisplay.setMap(map);
          calcRoute();
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  
      function calcRoute() {
          var checkboxArray = ["Klosterneuburgerstrasse 3,1200 Wien", "Simon-Denk Gasse 2,1090 wien", "Favoritenstrasse 3, 1100 Wien", "Hütteldorferstrasse 4, 1140 Wien", "Summeringerhauptstrasse 3, 1110 Wien", "Kobesgase, 1220 Wien", "Ziegelhofstrasse 3, 1220 Wien"];
          var start = checkboxArray[0];
          var end = checkboxArray[checkboxArray.length - 1];
          var waypts = [];
          for(var i = 1; i < checkboxArray.length - 1; i++) {
              var adresanesto = checkboxArray[i];
              if(adresanesto !== "") {
                  waypts.push({
                      location: adresanesto,
                      stopover: true
                  });
              }
          }
          var request = {
              // from: Blackpool to: Preston to: Blackburn
              origin: start,
              destination: end,
              waypoints: waypts,
              optimizeWaypoints: true,
              travelMode: google.maps.DirectionsTravelMode.DRIVING
          };
          directionsService.route(request, function(response, status) {
              if(status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
                  var route = response.routes[0];
                  var summaryPanel = document.getElementById("directions_panel");
                  summaryPanel.innerHTML = "";
                  // For each route, display summary information.
  
                  var displayText = '';
                  var arrival = new Date(); 
  
                  var secondsToArrival = 0;
                  // set arrival time
                  arrival.setHours(15);
                  arrival.setMinutes(0);
                  arrival.setSeconds(0);
  
                  // let's calculate back.  From finish to start
                  for(var i = route.legs.length - 1; i >=0; i--) {
                    //summaryPanel.innerHTML +=  +'s<br>';
                    secondsToArrival += route.legs[i].duration.value;
                    // new date variable.
                    var startAtWaypoint = new Date(); 
                    startAtWaypoint.setHours(arrival.getHours());
                    startAtWaypoint.setMinutes(arrival.getMinutes());
                    startAtWaypoint.setSeconds(arrival.getSeconds());
  
                    // calculate difference.  We subtract the seconds.
                    startAtWaypoint.setSeconds(arrival.getSeconds() - secondsToArrival);
  
                    switch(i) {
                        case 0: var ziel = 'A to B'; break;
                        case 1: var ziel = 'B to C'; break;
                        case 2: var ziel = 'C to D'; break;
                        case 3: var ziel = 'D to E'; break;
                        case 4: var ziel = 'E to F'; break;
                        case 5: var ziel = 'F to G'; break;
                        case 6: var ziel = 'G to H'; break;
                        case 7: var ziel = 'H to I'; break;
                        default: var ziel = '';
                    }
  
                    displayText = 'segment: ' + ziel 
                                  + '<br>dist: ' + route.legs[i].distance.text 
                                  + '<br> time segment: ' + route.legs[i].duration.value 
                                  + 's <br> seconds to arrival: ' + secondsToArrival 
                                  + 's <br> time at waypoint: ' + startAtWaypoint.getHours() +':'+ startAtWaypoint.getMinutes()
                                  + '<hr>' + displayText;   // notice: instead of displayText+= , I put displayText at the end, because the loop is backwards
                  }
                  summaryPanel.innerHTML = displayText;
  
                  computeTotalDistance(response);
              } 
              else {
                  alert("directions response " + status);
              }
          });
      }
      function computeTotalDistance(result) {
          var totalDist = 0;
          var totalTime = 0;
          var myroute = result.routes[0];
          for(i = 0; i < myroute.legs.length; i++) {
              totalDist += myroute.legs[i].distance.value;
              totalTime += myroute.legs[i].duration.value;
          }
          totalDist = totalDist / 1000.
          document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(0) + " minutes";
      }    
  </script>
  

  example fiddle

  回复于 2024-05-08T10:07:17+08:00
• 0

  当你不知道下一个腿的持续时间时，你将如何计算航点的起飞时间？

  你必须从最后一条腿到第一条腿进行迭代 .
  而不是使用复杂的时间计算，你应该使用 Date -object，'s what it' s适合 .

  function initialize() {
    var goo = google.maps,
      map = new goo.Map(document.getElementById("map_canvas"), {
        center: new goo.LatLng(41.850033, -87.6500523),
        zoom: 6,
        noClear: true,
        disableDefaultUI: true
      }),
      service = new goo.DirectionsService(),
      renderer = new goo.DirectionsRenderer({
        map: map
      });
    map.controls[goo.ControlPosition.TOP_RIGHT]
      .push(document.getElementById("directions_panel"));
    goo.event
      .addDomListener(document.getElementById("directions_panel"),
        'click',
        function(e) {
          var legs = this.querySelectorAll('div[id^="ruta"][data-latlng]');
          for (var i = 0; i < legs.length; ++i) {
            if (
              legs[i] == e.target ||
              legs[i].contains(e.target)
            ) {
              var latlng = legs[i]
                .getAttribute('data-latlng')
                .split(',')
              map.panTo(new goo.LatLng(latlng[0], latlng[1]));
              return;
            }
          }
        });
    calcRoute(service,
      renderer, ["Klosterneuburgerstrasse 3,1200 Wien",
        "Simon-Denk Gasse 2,1090 wien",
        "Favoritenstrasse 3, 1100 Wien",
        "Hütteldorferstrasse 4, 1140 Wien",
        "Summeringerhauptstrasse 3, 1110 Wien",
        "Kobesgase, 1220 Wien",
        "Ziegelhofstrasse 3, 1220 Wien"
      ]);
  }
  
  function calcRoute(service, renderer, route) {
    var goo = google.maps,
      request = {
        origin: route.shift(),
        destination: route.pop(),
        waypoints: (function(r) {
          var a = [];
          for (var i = 0; i < r.length; ++i) {
            a.push({
              location: r[i],
              stopover: true
            })
          }
          return a;
        }(route)),
        optimizeWaypoints: true,
        travelMode: goo.DirectionsTravelMode.DRIVING
      };
  
    service.route(request, function(response, status) {
      if (status == goo.DirectionsStatus.OK) {
        renderer.setDirections(response);
        var route = response.routes[0];
  
        //parse string into a Date-object
        var arrival = (function(hm) {
            var d = new Date(),
              a = hm.split(':');
            d.setHours(parseInt(a[0]));
            d.setMinutes(parseInt(a[1]));
            d.setSeconds(0);
            return d;
          }("06:00")),
          total = {
            duration: 0,
            distance: 0
          },
          //returns the formatted pickup-time
  
          pickup = function(duration) {
            arrival.setTime(arrival.getTime() - (duration * 1000));
  
            return ([("0" + arrival.getHours()).slice(-2), 
                     ("0" + arrival.getMinutes()).slice(-2)]
              .join(':'));
          },
          html = [],
          item;
  
        for (var i = route.legs.length - 1; i >= 0; --i) {
          total.distance += route.legs[i].distance.value;
          total.duration += route.legs[i].duration.value;
  
          item = "<div data-latlng='" + 
                    route.legs[i].start_location.toUrlValue() + "' id='ruta" + 
                   (i + 1) + "'><b><span class='ziel'> " +
                   String.fromCharCode(65 + i) +
                   ' to ' +
                   String.fromCharCode(65 + 1 + i) +
                   "</span></b>
  
  ";
  
          item += "<b>Distance: </b>" + route.legs[i].distance.text + "
  ";
          item += "<b>Duration: </b><span id='timespan" + (i + 1) + "'>" +
            (route.legs[i].duration.value / 60).toFixed(0) +
            "</span> Min.
  ";
          item += "<b>Pick up time: </b><span id='vremespan" + (i + 1) + "'>" +
            "<span style='color:#ff0000'>" +
            pickup(route.legs[i].duration.value) + "</span>
  
  </div>";
          html.unshift(item);
        }
  
        html.push(
          "<hr/>total distance is: " + (total.distance / 1000).toFixed(1) +
          " km<br>total time is: " +
          (total.duration / 60).toFixed(0) + " minutes")+'
  <hr/>';
        document.getElementById("directions_panel").innerHTML = html.join('');
  
      } else {
        document.getElementById("directions_panel") = "directions response:" + status;
      }
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  

  html,
  body,
  #map_canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
  .ziel {
    padding: 5px;
    background-color: #0086A9;
    color: #fff;
    font-size: 1.1em;
    margin-bottom: 10px;
    cursor: pointer;
  }
  #directions_panel {
    height:60%;
    overflow: auto;
    background-color: #FFEE77;
    font-size: 12px;
    padding: 5px 5px 50px 5px;
  }
  

  <script src="http://maps.google.com/maps/api/js?v=3"></script>
  <div id="map_canvas">
    <div id="directions_panel"></div>
  </div>
  

  回复于 2024-05-08T10:07:17+08:00