Question

我循环遍历两个循环，一个带有活动驱动程序，另一个带有驱动程序路径。

在第二个循环中我使用direction.service创建道路路线，我可以看到标记，但路线没有显示。

控制台没有错误。

注意：问题出在代码段 ROUTING DRIVERS 部分。

我的代码段如下：

<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];

            }
        });

direction.service不显示多个点之间的路由

1 个答案: