如何将行车路线段与 Google Maps API V3 中的路线名称配对？

Question

我有一个行车路线应用程序，可以为我提供转弯路线。开始、结束和航点来自我的表单，如下所示：

    <b>Start</b>
    <select id="startdrop" name="startthere">
    ALL MY OPTIONS
    <option selected value="COMPLETEADDRESS"><%= LOCATIONNAME %></option>
    </select>

    Stops Along the Way
    <select multiple id="waypoints" name="waypointsselected[]">
    <option selected value="COMPLETEADDRESS"><%= LOCATIONNAME %></option>
    </select>           

    <b>End</b>
    <select id="enddrop" name="endthere">
    ALL MY OPTIONS
    <option selected value="COMPLETEADDRESS"><%= LOCATIONNAME %></option>
    </select>

我的目标是让 LOCATIONNAME 出现在每个点的信息窗口和路线摘要中。对于从起点到航点到终点的每个点，摘要应如下所示：

    A Great House
    136 Utica Ave, Brooklyn, NY 11213, USA to 

    Knights Baptist Church
    180 Utica Ave, Brooklyn, NY 11213

请参阅下面的我的尝试。现在的问题：“StartText”对于每条路线都是相同的，并且 Waypoints 破坏了 javascript，因为数组是空的：

JAVASCRIPT

    function calcRoute() {
          var start = document.getElementById("startdrop").value;
          var startSelect = document.getElementById("startdrop");
          var startText = startSelect.options[startSelect.selectedIndex].text;
          var end = document.getElementById("enddrop").value;
          var endSelect = document.getElementById("enddrop");
          var endText = startSelect.options[endSelect.selectedIndex].text;
              var waypts = [];
          var waypointText = [];
          var checkboxArray = document.getElementById("waypoints");
          for (var i = 0; i < checkboxArray.length; i++) {
             waypts.push({
                  location:checkboxArray[i].value,
                  waypointText:checkboxArray[i].text,
                  stopover:true
              });
         }

   var request = {
              origin: start,
              destination: end,
              waypoints: waypts,
              optimizeWaypoints: optimize,
              travelMode: google.maps.TravelMode.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.
              for (var i = 0; i < route.legs.length; i++) {
                var routeSegment = i+1;
                summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";


                summaryPanel.innerHTML += startText + "</b><br />";
                summaryPanel.innerHTML += route.legs[i].start_address + " to ";
                summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
                summaryPanel.innerHTML += route.legs[i].distance.text + "<br />";
                summaryPanel.innerHTML += route.legs[i].duration.text + "<br /><br />";

编辑 1

这里有一些关于重新创建地图的信息，这可能会起作用 (Google Maps V3 - waypoints + infowindow with random text)，但如果有其他更有效的方法，我一定很乐意听听！

Answer 1

DirectionsStep 对象有一个名为 end_location 的属性。您可以获取此值并将其显示在信息窗口中吗？

https://developers.google.com/maps/documentation/javascript/reference#DirectionsLeg