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出现在每个点和路线摘要的infowindow中。对于从开始到航点到结束的每个点，摘要应如下所示：

    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

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

1 个答案: