如何修改此 Google 地图 API 代码以将两条不同的路线合并在一起？

Question

我使用的是 WPCargo POD 插件，它带有一个路线规划器，用于 map 我在我的平台上进行的每批货物。 我已经自定义它以显示从药房到患者地址的路线，但是，如果我有两次交付，map 将生成两条单独的路线（A 点到 B 点）和（A 点到 B 点），我怎么能有如果有不止一次送货，那么 map 会显示（A 点到 B 点到 C 点到 D 点）。

一个更好的例子是

路线 1： 100 Test Avenue 至 200 Test Boulevard

路线2： 300测试路到400测试车道

然后 map 将其输出为两条不同的路由，并且不会将这两条路由连接在一起。

<script>
    let map = null;
    function initPODRouteMap() {
        const directionsService = new google.maps.DirectionsService();
        const directionsRenderer = new google.maps.DirectionsRenderer();
        map = new google.maps.Map(document.getElementById("wpcpod-route-map"), {
            zoom: 6,
        });
        directionsRenderer.setMap(map);
        // AJAX
        jQuery.ajax({
            type:"POST",
            data:{
                action  : 'wpcpod_generate_route_address',
            },
            url : "<?php echo admin_url( 'admin-ajax.php' ); ?>",
            beforeSend:function(){
            },
            success:function(response){
                $('#wpcpod-route-planner #wpcpod-route-map').css("height", "<?php echo apply_filters( 'wpcpod_route_map_height', 600 ); ?>px");
                if( response.status == 'success'){
                    var wayPoints = [];
                    jQuery.each( response.waypoints, function( index, value ){
                        wayPoints.push( {
                            location: value.address,
                            stopover: true,
                        } );
                    } );
                    console.log(wayPoints);

                    //calculateAndDisplayRoute(directionsService, directionsRenderer, response.origin, response.destination, wayPoints, response.shipments, response.poo );
                    //calculateAndDisplayRoute(directionsService, directionsRenderer, response.origin, response.destination, wayPoints, response.shipments, response.poo );
                    console.log(response.shipments);
                    console.log(response.origin);
                    console.log(response.destination);
                    //calculateAndDisplayRoute(directionsService, directionsRenderer, response.shipments[0], response.shipments[0].pharmacy_address, null, response.shipments, response.poo );
                    let colors = ['red', 'green', 'blue', '#FFF700', '#2E2D88', '#933709'];

                    for (let i = 0; i<response.shipments.length; i++){
                        let directionDisplay = new google.maps.DirectionsRenderer({
    polylineOptions: {
      strokeColor: colors[i],
    }
  });
                        directionDisplay.setMap(map);

                    calculateAndDisplayRoute(directionsService, directionDisplay, response.shipments[i].pharmacy_address,response.shipments[i], null, response.shipments[i], response.poo );
                }

                    //calculateAndDisplayRoute(directionsService, directionsRenderer, response.shipments[1], response.shipments[1].pharmacy_address, null, response.shipments, response.poo );

                   // calculateAndDisplayRoute(directionsService, directionsRenderer, response.origin, response.shipments[0], null, response.shipments, response.poo );
                    //calculateAndDisplayRoute(new google.maps.DirectionsService(), new google.maps.DirectionsRenderer(), response.shipments[0], response.shipments[1], null, response.shipments, response.poo );

                    //let shipment = response.shipments[0];
                    //console.log(shipment);

                    //calculateAndDisplayRoute(directionsService, directionsRenderer, response.shipments[0].pharmacy_address, response.shipments[0], null, response.shipments[0], response.poo );

                    //calculateAndDisplayRoute(directionsService, directionsRenderer, response.shipments[1].pharmacy_address, response.shipments[1], null, response.shipments[1], response.poo );
                    //calculateAndDisplayRoute(directionsService, directionsRenderer, response.shipments[2].pharmacy_address, response.shipments[2], null, response.shipments[2], response.poo );
                    //calculateAndDisplayRoute(directionsService, directionsRenderer, response.shipments[3].pharmacy_address, response.shipments[3], null, response.shipments[3], response.poo );
                    //calculateAndDisplayRoute(directionsService, directionsRenderer, response.shipments[4].pharmacy_address, response.shipments[4], null, response.shipments[4], response.poo );

                    //calculateAndDisplayRoute(directionsService, directionsRenderer, response.shipments[0], response.shipments[1], null, shipment, response.poo );
                    //let directionDisplay = new google.maps.DirectionsRenderer();
                    //directionDisplay.setMap(map);

                    //calculateAndDisplayRoute(directionsService, directionDisplay, response.shipments[0].pharmacy_address, response.shipments[0], null, response.shipments[0], response.poo );



                }else{
                    $('#wpcpod-route-planner #wpcpod-route-map').remove();
                    $('#wpcpod-route-planner #wpcpod-route-loader').remove();
                    $('#wpcpod-route-planner #route-planner-content').append('<div class="my-4 alert alert-info text-center">'+response.message+'</div>')
                }
            }
        });
    }
    function renderMarker( data, content, end = true, warehouse = false ){
        const position  = end ? data.end_location : data.start_location ;
        const image     = warehouse ? 'origin.png' : 'parcel.png' ;
        const title     = end ? data.end_address : data.start_address ;
        /*
        const oMarker   = new google.maps.Marker({
            position: position,
            map,
            icon: "<?php echo WPCARGO_POD_URL.'assets/img/';  ?>"+image,
            title: title,
        });
        */
        const infowindow = new google.maps.InfoWindow({
            content: content,
        });
        /*
        oMarker.addListener("click", () => {
            infowindow.open(map, oMarker);
        });
        */

    }
    function calculateAndDisplayRoute(directionsService, directionsRenderer, origin, destination, wayPoints, shipments, poo) {
        const waypts = wayPoints;
        const summaryPanel = document.getElementById("directions-panel");
        //const singleParcel = shipments.length === 1 ? true : false ;
          const singleParcel = true;
        directionsService.route({
            origin: origin.address,
            destination: destination.address,
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.TravelMode.DRIVING,
            }, (response, status) => {
                if (status === "OK") {
                    directionsRenderer.setDirections(response);
                    const route = response.routes[0];
                    if( poo ){
                        var leg         = response.routes[ 0 ].legs[ 0 ];
                        let sContent = `
                            <b><?php _e( 'Point of Origin', 'wpcargo-pod' ); ?>:</b><br>
                            <b><?php _e( 'Distance', 'wpcargo-pod' ); ?>: ${leg.distance.text}</b><br>
                            ${leg.start_address} <b><?php _e( 'to', 'wpcargo-pod' ); ?></b> ${leg.end_address}
                        `;
                        renderMarker( leg, sContent, false, true );
                    }
                    // For each route, display summary information.
                    for (let i = 0; i < route.legs.length; i++) {
                        const routeSegment = i + 1;
                        let content = `
                            <b><?php _e( 'Route Segment', 'wpcargo-pod' ); ?>: </b><br>
                            <?php _e( 'Shipment Number', 'wpcargo-pod' ); ?>: <b>${shipments['number']}</b><br>
                            </br>
                            <b><?php _e( 'Distance', 'wpcargo-pod' ); ?>: ${route.legs[i].distance.text}</b><br>
                            ${route.legs[i].start_address} <b><?php _e( 'to', 'wpcargo-pod' ); ?></b> ${route.legs[i].end_address}<br>
                        `;
                        if ('info' in shipments ) {
                            for (const [key, value] of Object.entries( shipments['info'] )) {
                                if( value == ''){
                                    continue;
                                }
                                content += value + "<br>";
                            }

                        }
                        renderMarker( route.legs[i], content );
                        if( route.legs.length === i + 1 ){
                            renderMarker( route.legs[i], content );
                        }
                        summaryPanel.innerHTML += '<section class="border-bottom mb-4 pb-4" >'+content +'<section>';
                    }
                    $('#wpcpod-route-planner #wpcpod-route-map').removeClass('d-none');
                } else {
                    summaryPanel.innerHTML = "<?php _e( 'Directions request failed due to', 'wpcargo-pod' ); ?> " + status;
                }
                $('#wpcpod-route-planner #wpcpod-route-loader').remove();
            });
    }



    
</script>

任何帮助或建议将不胜感激。

我试过用谷歌搜索这个问题，但出于某种原因，我找不到与我的情况相关的任何信息。

Answer 1

您必须遍历response.shipments数组并为每对连续的发货调用calculateAndDisplayRoute function。 然后为每条路线使用不同的 colors。 获取所有路由后，将它们连接成一条路由并使用黑色显示。

let map = null;
let colors = ['red', 'green', 'blue', '#FFF700', '#2E2D88', '#933709'];

function initPODRouteMap() {
    const directionsService = new google.maps.DirectionsService();
    const directionsRenderer = new google.maps.DirectionsRenderer();
    map = new google.maps.Map(document.getElementById("wpcpod-route-map"), {
        zoom: 6,
    });
    directionsRenderer.setMap(map);
    // AJAX
    jQuery.ajax({
        type:"POST",
        data:{
            action  : 'wpcpod_generate_route_address',
        },
        url : "<?php echo admin_url( 'admin-ajax.php' ); ?>",
        beforeSend:function(){
        },
        success:function(response){
            $('#wpcpod-route-planner #wpcpod-route-map').css("height", "<?php echo apply_filters( 'wpcpod_route_map_height', 600 ); ?>px");
            if( response.status == 'success'){
                var wayPoints = [];
                jQuery.each( response.waypoints, function( index, value ){
                    wayPoints.push( {
                        location: value.address,
                        stopover: true,
                    } );
                } );
                console.log(wayPoints);

                let combinedRoute = [];
                for (let i = 0; i < response.shipments.length - 1; i++) {
                    let origin = response.shipments[i].pharmacy_address;
                    let destination = response.shipments[i + 1].pharmacy_address;
                    let color = colors[i % colors.length];
                    let directionDisplay = new google.maps.DirectionsRenderer({
                        polylineOptions: {
                            strokeColor: color,
                        }
                    });
                    directionDisplay.setMap(map);
                    calculateAndDisplayRoute(directionsService, directionDisplay, origin, destination, null, response.shipments, response.poo );
                    combinedRoute.push(directionDisplay.getDirections().routes[0]);
                }

                let finalRoute = [];
                for (let i = 0; i < combinedRoute.length; i++) {
                    finalRoute = finalRoute.concat(combinedRoute[i].legs);
                }

                let finalDirectionDisplay = new google.maps.DirectionsRenderer({
                    polylineOptions: {
                        strokeColor: 'black',
                    }
                });
                finalDirectionDisplay.setMap(map);
                finalDirectionDisplay.setDirections({routes: [{legs: finalRoute}]});
            }
        }
    });
}