direction.service不顯示多個點之間的路線

Question

我通過兩個循環與活動的驅動程序和其他司機路線循環。

在第二個循環中，我使用direction.service創建道路路線，我可以看到標記，但路線未顯示。

控制檯上沒有錯誤。

注意：問題出在路由驅動程序部分的代碼段中。

我的代碼片段如下：

<script> 
    var directionsService = new google.maps.DirectionsService(); 
    var directionsDisplay = new google.maps.DirectionsRenderer(); 
    function initialize(jsondata) { 

     var markers = ""; 

     var lat_lng = []; 
     var latlngbounds = ""; 

     markers = JSON.parse(jsondata); 
     console.log(markers); 
     var mapOptions = { 
      center: new google.maps.LatLng(50.7663, 15.0543), 
      zoom: 10, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      navigationControl: true 
     }; 

     lat_lng = new Array(); 
     latlngbounds = new google.maps.LatLngBounds(); 
     var infoWindow = new google.maps.InfoWindow(); 
     var map = new google.maps.Map(
        document.getElementById("map-canvas"), 
        mapOptions); 


     var value = markers.length; 

     for (var i = 0; i < markers.length; i++) { 
      var data = markers[i] 
      var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
      lat_lng.push(myLatlng); 

      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       icon:data.IconImage , 
       label: data.maxtime 
      }); 

      (function (marker, data) { 
       // Attaching a click event to the current marker 
       google.maps.event.addListener(marker, "click", function (e) { 

        infoWindow.setContent(data.addr); 
        infoWindow.open(map, marker); 
       }); 
      })(marker, data); 
     } 

     //***********ROUTING DRIVERS****************// 


     var pageUrl = '<%=ResolveUrl("~/WebService2.asmx")%>'; 

     $.ajax({ 
      type: "POST", 
      url: pageUrl + '/GetActiveDrivers', 
      contentType: "application/json; charset=utf-8", 
      data: "{}", 
      dataType: "json", 
      success: function (data) { 
       var markersR; 
       for (var i = 0; i < JSON.parse(data.d).length; i++) { 
        var obj = JSON.parse(data.d)[i]; 
        $.ajax({ 
         type: "POST", 
         url: pageUrl + '/GetRouteByDriver', 
         contentType: "application/json; charset=utf-8", 
         data: "{'DriverId':'" + obj.driverId + "'}", 
         dataType: "json", 
         success: function (dataval) { 
          var infowindow = new google.maps.InfoWindow(); 
          var flightPlanCoordinates = []; 
          var bounds = new google.maps.LatLngBounds(); 
          console.log(JSON.parse(dataval.d)) 
          for (j = 0; j < JSON.parse(dataval.d).length; j++) { 
           var objval = JSON.parse(dataval.d)[j]; 

           marker = new google.maps.Marker({ 
            position: new google.maps.LatLng(objval.Lat, objval.Lng), 
            map: map 
           }); 
           flightPlanCoordinates.push(marker.getPosition()); 
           bounds.extend(marker.position); 

           google.maps.event.addListener(marker, 'click', (function (marker, objval) { 
            return function() { 
             infowindow.setContent(objval.Time); 
             infowindow.open(map, marker); 
            } 
           })(marker, objval)); 
          } 

          map.fitBounds(bounds); 
          // alert(flightPlanCoordinates[0]); 
          var start = flightPlanCoordinates[0]; 
          var end = flightPlanCoordinates[flightPlanCoordinates.length - 1]; 
          var waypts = []; 
          for (var i = 1; i < flightPlanCoordinates.length - 1; i++) { 
           waypts.push({ 
            location: flightPlanCoordinates[i], 
            stopover: true 
           }); 
          } 
          calcRoute(start, end, waypts); 



         }, 
         error: function (requestObject, error, errorThrown) { 
          alert(error); 
         } 

        }); 

       } 
      }, 
      error: function (requestObject, error, errorThrown) { 
       alert(error); 
      } 

     }); 
    } 
    function calcRoute(start, end, waypts) { 
     alert(start); 
     var request = { 
      origin: start, 
      destination: end, 
      waypoints: waypts, 
      optimizeWaypoints: true, 
      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]; 

      } 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    <script type="text/javascript"> 

    function GetCustomers() { 
    var pageUrl = '<%=ResolveUrl("~/WebService2.asmx")%>'; 

    $.ajax({ 
     type: "POST", 
     url: pageUrl + '/ShowCustomers', 
     contentType: "application/json; charset=utf-8", 
     data: "{}", 
     dataType: "json", 
     success: function (data) { 
      initialize(data.d); 
     }, 
     error: function (requestObject, error, errorThrown) { 
     alert(error); 
     } 

    }); 

} 
    $(document).ready(function() { 
     GetCustomers(); 
    }); 
    // setInterval(function() { GetCustomers(); }, 6000); 
</script> 

<div id = "map-canvas"> 
</div> 

Answer 1

你缺少

directionsDisplay.setMap(map); 

把它放在這裏：

directionsService.route(request, function (response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
       directionsDisplay.setMap(map); 
       var route = response.routes[0]; 

      } 
     });