Question

我需要路线，持续时间和距离（按照正确的顺序）并添加到数组中。（这是由于异步。）

我有多种途径（A-> B）（B-> C）（C-> D）。在我的情况下，航点使用不是一种选择。

回调并不像我找到的例子那样有效。

在下面的示例中，由于发送/响应google（异步）并且routeArrayResult为空，路由顺序不正确。

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <style type="text/css"> 
            html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
        <script type="text/javascript">
            var map;
            var routeColor;
            var myOptions = {
                  zoom:7,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
            }
            var totalRoutesArray = 0;
            var callbackCount = 0;
            var routeArray = ['61.84448683734486, 8.85223388671875',
                                '61.75298123367897, 9.078826904296875',
                                '61.484039,7.645798',
                                '61.944118091023746,7.97882080078125'];
            var routeArrayResult = [];
            var routeColorArray = ['#ff00ff',
                            '#40ff00',
                            '#0040ff',
                            '#ffbf00',
                            '#00ffff',
                            '#ff00ff',
                            '#ff8000'];

            function initMap() {
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            }

            function renderDirections(result, order) {
                    var directionsRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true, suppresInfoWindows: true}); 
                    directionsRenderer.setOptions({polylineOptions: { strokeWeight: 3, strokeOpacity: 0.5}});
                    directionsRenderer.setMap(map);
                    directionsRenderer.setDirections(result);
                    var route = result.routes[0];
                    var summaryPanel = document.getElementById("directions_panel");
                    routeArrayResult.push("Route " + order + " distance:" + route.legs[0].distance.text);
                    summaryPanel.innerHTML += "Route " + order + " (" + route.legs[0].distance.text + ')<br>';
                    console.log("Render - Push result to Array id:" + order);
            }    
   
            function requestDirections(order, start, end) {
                var directionsService = new google.maps.DirectionsService;
                var request = {
                    origin: start,
                    destination: end,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING,
                    drivingOptions: {
                        departureTime: new Date("08/08/2018")
                    }
                };
                directionsService.route(request, function(result, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        renderDirections(result, order);
                    } else {
                        alert("directions response " + status);                        
                    }
                });
                console.log("Total resultslength: " + routeArrayResult.length + " total routes:" + routeArray.length);
                console.log("routeArrayResult: "+routeArrayResult);
            }

            function doClick3() {
                routeArrayResult = [];
                var summaryPanel = document.getElementById("directions_panel");
                summaryPanel.innerHTML = "";
                for (var i = 0;i < routeArray.length-1; i++){
                    routeColor = routeColorArray[i];
                    totalRoutesArray = routeArray.length;
                    console.log("doclick3 [" + i + "] From:" + routeArray[i] + " To:" + routeArray[i+1] + " in color " + routeColor);            
                    requestDirections(i, routeArray[i], routeArray[i+1]); // do the magic on the map
                } 
            }

            function doClickClear() {
                directionsRenderer.setMap(null);
            }
        </script>
    </head>
    <body onload="initMap()">
        <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">
        <input type="button" name="resetButton" onclick="doClick3();" value="calc 3 routes"> 
        <input type="button" name="resetButton" onclick="doClickClear();" value="clear routes"> 
            <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
        </div>
    </body>
</html>

＆＃13;

Answer 1

按顺序将结果存储在routeArrayResult数组中，然后在侧面板中渲染它们。

routeArrayResult[order] = "Route " + order + " (distance:" + route.legs[0].distance.text + ')<br>';
summaryPanel.innerHTML = "";
for (var i = 0; i < routeArrayResult.length; i++) {
  summaryPanel.innerHTML += routeArrayResult[i];
}

proof of concept fiddle

代码段

var map;
var routeColor;
var myOptions = {
  zoom: 7,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var totalRoutesArray = 0;
var callbackCount = 0;
var routeArray = ['61.84448683734486, 8.85223388671875',
  '61.75298123367897, 9.078826904296875',
  '61.484039,7.645798',
  '61.944118091023746,7.97882080078125'
];
var routeArrayResult = [];
var routeColorArray = ['#ff00ff',
  '#40ff00',
  '#0040ff',
  '#ffbf00',
  '#00ffff',
  '#ff00ff',
  '#ff8000'
];

function initMap() {
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function renderDirections(result, order) {
  var directionsRenderer = new google.maps.DirectionsRenderer({
    suppressMarkers: true,
    suppresInfoWindows: true
  });
  directionsRenderer.setOptions({
    polylineOptions: {
      strokeWeight: 3,
      strokeOpacity: 0.5
    }
  });
  directionsRenderer.setMap(map);
  directionsRenderer.setDirections(result);
  var route = result.routes[0];
  var summaryPanel = document.getElementById("directions_panel");
  routeArrayResult[order] = "Route " + order + " (distance:" + route.legs[0].distance.text + ')<br>';
  summaryPanel.innerHTML = "";
  for (var i = 0; i < routeArrayResult.length; i++) {
    summaryPanel.innerHTML += routeArrayResult[i];
  }
  console.log("Render - Push result to Array id:" + order);
}

function requestDirections(order, start, end) {
  var directionsService = new google.maps.DirectionsService;
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    drivingOptions: {
      departureTime: new Date("08/08/2018")
    }
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      renderDirections(result, order);
    } else {
      alert("directions response " + status);
    }
    console.log("Total resultslength: " + routeArrayResult.length + " total routes:" + routeArray.length);
    console.log("routeArrayResult: " + routeArrayResult);
  });

}

function doClick3() {
  routeArrayResult = [];
  var summaryPanel = document.getElementById("directions_panel");
  summaryPanel.innerHTML = "";
  for (var i = 0; i < routeArray.length - 1; i++) {
    routeColor = routeColorArray[i];
    totalRoutesArray = routeArray.length;
    console.log("doclick3 [" + i + "] From:" + routeArray[i] + " To:" + routeArray[i + 1] + " in color " + routeColor);
    requestDirections(i, routeArray[i], routeArray[i + 1]); // do the magic on the map
  }
}

function doClickClear() {
  directionsRenderer.setMap(null);
}
google.maps.event.addDomListener(window, "load", initMap);

html {
  height: 100%
}

body {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.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">
  <input type="button" name="resetButton" onclick="doClick3();" value="calc 3 routes">
  <input type="button" name="resetButton" onclick="doClickClear();" value="clear routes">
  <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
</div>

没有航点的多个航线，错误的订单结果由于异步

1 个答案: