标记之间的距离谷歌地图

Question

我试图显示标记之间的距离，但它只显示一些标记之间的距离，而不是全部。这是我的代码 下面的函数让我显示距离。 大家可以帮我或者给我一个例子来解决吗？

function drawRouteMap(locations) {

    var start, end;
    var waypts = [];

    for (var k = 0; k < locations.length; k++) {
        if (k >= 1 && k <= locations.length - 2) {
            waypts.push({
                location: locations[k],
                stopover: true
            });
        }
        if (k == 0) start = locations[k];

        if (k == locations.length - 1) end = locations[k];

    }
    var request = {
        origin: start,
        destination: end,
        waypoints: waypts,
        optimizeWaypoints: false,
        travelMode: google.maps.TravelMode.DRIVING
    };
    console.log(request);

    directionsService.push(new google.maps.DirectionsService());
    var instance = directionsService.length - 1;
    directionsDisplay.push(new google.maps.DirectionsRenderer({
        preserveViewport: true
    }));
    directionsDisplay[instance].setMap(map);
    directionsService[instance].route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            console.log(status);
  directionsDisplay[instance].setDirections(response);
            var f = response.routes[0];

      
            var summaryPanel = document.getElementById("directions_panel");
            summaryPanel.innerHTML = "";
            // For each route, display summary information.
            for (var i = 0; i < f.legs.length; i++) {
                var routeSegment = i + 1;
               summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
          
                summaryPanel.innerHTML += f.legs[i].distance.text + "<br /><br />";
            }
             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(2) + " minutes";
}

Answer 1

您正在覆盖每条路线的路线段、总距离和时间。 如果您想要合并所有单独路线的总和，以克服 Google Maps Javascript API v3（免费版本）上的航路点限制，则需要合并“路线”以及每条路线的支线.

function drawRouteMap(locations) {
    var start, end;
    var waypts = [];
    for (var k = 0; k < locations.length; k++) {
        if (k >= 1 && k <= locations.length - 2) {
            waypts.push({
                location: locations[k],
                stopover: true
            });
        }
        if (k == 0) start = locations[k];

        if (k == locations.length - 1) end = locations[k];

    }
    var request = {
        origin: start,
        destination: end,
        waypoints: waypts,
        optimizeWaypoints: false,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.push(new google.maps.DirectionsService());
    var instance = directionsService.length - 1;
    directionsDisplay.push(new google.maps.DirectionsRenderer({
        preserveViewport: true
    }));
    directionsDisplay[instance].setMap(map);
    directionsService[instance].route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay[instance].setDirections(response);
            var f = response.routes[0];
            var summaryPanel = document.getElementById("directions_panel");
            // For each route, display summary information.
            for (var i = 0; i < f.legs.length; i++) {
               routeSegment += 1;
               summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
          
               summaryPanel.innerHTML += f.legs[i].distance.text + "<br /><br />";
            }
            computeTotalDistance(response);
        } else {
            alert("directions response " + status);
        }
    });
}
var totalDist = 0;
var totalTime = 0;
function computeTotalDistance(result) {
    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;
    }
    document.getElementById("total").innerHTML += "total distance is: " + (totalDist/1000).toFixed(2) + " km &nbsp;total time is: " + (totalTime / 60).toFixed(2) + " minutes<br>";
}

更新了小提琴

代码片段：

var directionsDisplay = [];
var directionsService = [];
var map = null;
var g = [];
var path = new Array();
var routeSegment = 0;

function calcRoute() {
  var msg = [
    '33.7489423024  ,130.7256859226',
    '33.7479701778  ,130.7253248863',
    '33.7482757584  ,130.7286301533',
    '33.7443595228  ,130.7293247203',
    '33.7404432614  ,130.7285471875',
    '33.7368881031  ,130.7295194927',
    '33.7334162726  ,130.7306862223',
    '33.7312776983  ,130.7356025791',
    '33.7320832066  ,130.7378245797',
    '33.7322498889  ,130.7397410796',
    '33.7312500414  ,130.7423520199',
    '33.7301668637  ,130.7446296584',
    '33.7275282876  ,130.7463796345',
    '33.7237787430  ,130.7494906599',
    '33.7228899846  ,130.7515183102',
    '33.7221679037  ,130.7551847057',
    '33.7266397281  ,130.7597952280',
    '33.7323613364  ,130.7596838626',
    '33.7323613364  ,130.7596838626',
    '33.7323613364  ,130.7596838626',
    '33.7323613364  ,130.7596838626',
    '33.7348055151  ,130.7594337709',
    '33.7355555217  ,130.7644055456',
    '33.7437213571  ,130.7668216356',
  ];
  var input_msg = msg;
  var locations = new Array();


  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < input_msg.length; i++) {
    var tmp_lat_lng = input_msg[i].split(",");
    //var s = new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1]);
    locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1]));
    bounds.extend(locations[locations.length - 1]);
  }

  var mapOptions = {
    // center: locations[0],
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
  map.fitBounds(bounds);
  var summaryPanel = document.getElementById("directions_panel");
  summaryPanel.innerHTML = "";
  var i = locations.length;
  var index = 0;

  while (i != 0) {

    if (i < 3) {
      var tmp_locations = new Array();
      for (var j = index; j < locations.length; j++) {
        tmp_locations.push(locations[index]);
      }
      drawRouteMap(tmp_locations);
      i = 0;
      index = locations.length;
    }

    if (i >= 3 && i <= 10) {
      console.log("before :fun < 10: i value " + i + " index value" + index);
      var tmp_locations = new Array();
      for (var j = index; j < locations.length; j++) {
        tmp_locations.push(locations[j]);
      }
      drawRouteMap(tmp_locations);
      i = 0;
      index = locations.length;
      console.log("after fun < 10: i value " + i + " index value" + index);
    }

    if (i >= 10) {
      console.log("before :fun > 10: i value " + i + " index value" + index);
      var tmp_locations = new Array();
      for (var j = index; j < index + 10; j++) {
        tmp_locations.push(locations[j]);
      }
      drawRouteMap(tmp_locations);
      i = i - 9;
      index = index + 9;
      console.log("after fun > 10: i value " + i + " index value" + index);
    }
  }
}


function drawRouteMap(locations) {

  var start, end;
  var waypts = [];

  for (var k = 0; k < locations.length; k++) {
    if (k >= 1 && k <= locations.length - 2) {
      waypts.push({
        location: locations[k],
        stopover: true
      });
    }
    if (k == 0) start = locations[k];

    if (k == locations.length - 1) end = locations[k];

  }
  var request = {
    origin: start,
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: false,
    travelMode: google.maps.TravelMode.DRIVING
  };
  console.log(request);

  directionsService.push(new google.maps.DirectionsService());
  var instance = directionsService.length - 1;
  directionsDisplay.push(new google.maps.DirectionsRenderer({
    preserveViewport: true
  }));
  directionsDisplay[instance].setMap(map);
  directionsService[instance].route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      console.log(status);
      directionsDisplay[instance].setDirections(response);
      var f = response.routes[0];

      // g=g.concat(f);
      var summaryPanel = document.getElementById("directions_panel");
      // summaryPanel.innerHTML = "";
      // For each route, display summary information.
      for (var i = 0; i < f.legs.length; i++) {
        routeSegment += 1;
        summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";

        summaryPanel.innerHTML += f.legs[i].distance.text + "<br /><br />";
      }
      computeTotalDistance(response);
    } else {
      alert("directions response " + status);
    }




  });
}
var totalDist = 0;
var totalTime = 0;

function computeTotalDistance(result) {

  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;
  }

  document.getElementById("total").innerHTML += "total distance is: " + (totalDist / 1000).toFixed(2) + " km &nbsp;total time is: " + (totalTime / 60).toFixed(2) + " minutes<br>";
}



google.maps.event.addDomListener(window, 'load', calcRoute);

html,
body,
#dvMap {
  height: 70%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="info"></div>
<div id="dvMap"></div>
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
<div id="total"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">