如何在Google Maps API V3中将行驶方向路线段与路线名称配对

How can I pair driving directions route segments with the names of the route in Google Maps API V3?

本文关键字:方向路 Google Maps API V3      更新时间:2023-09-26

我有一个驾驶指南应用程序,可以为我提供逐转弯的方向。起点、终点和航路点来自我的表格,看起来像这样:

    <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

这里有一些关于重新创建地图的信息,这可能会奏效(谷歌地图V3-路点+带有随机文本的信息窗口),但如果有一种不同的、更有效的方法,我肯定很乐意听到!

DirectionsStep对象有一个名为end_location的属性。你可以得到这个值并在信息窗口中显示它吗?

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