映射API自定义可拖动方向

我正在使用Google Maps JS API v3为我获取多条路线、按方向选择路线的自定义多段线和自定义位置标记的一些方向。我已经将渲染器选项设置如下：

var directionsRendererRequest = {
    map: map,
    directions: response,
    routeIndex: i,
    draggable: true,
    suppressInfoWindows: true,
    suppressMarkers: true,
    suppressPolylines: true
};

正如你所看到的，我正在抑制信息窗口、标记和多段线，这样我就可以使用我自己的自定义窗口。我还使用可拖动选项使路线可拖动。然而，问题是，因为我已经在抑制标记，所以可拖动的标记也不会出现。这是否意味着我需要呈现自己的可拖动标记并向其添加侦听器？我该怎么说呢？

我需要知道如何添加自定义的可拖动标记，并将其单独应用于我的路线。

我的原始代码如下：

var directionsRequest = {
    origin: fromTo[j].origin,
    destination: fromTo[j].destination,
    travelMode: google.maps.TravelMode.DRIVING,
    provideRouteAlternatives: true
};
setTimeout(function() {
    directionsService.route(directionsRequest, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            responses.push(response);
            // Render directions, markers & polylines.
            renderDirections(j, response);
            renderDirectionsMarkers(j, response);
            renderDirectionsPolylines(j, response);
            if (responses.length === fromTo.length) {
                centerMapOnMarkers();
                handleTotalDistance();
            }
        } else {
            console.log('Directions request failed due to ' + status);
            j--;
            delay++;
        }
    });
}, delay);

现在我正在考虑在多段线上添加自定义的可拖动标记：

var polylineMousemove = function(index, route, event) {
    position = { lat: event.latLng.lat(), lng: event.latLng.lng() };
    if (typeof dragHandles[index] === 'undefined') {
        dragHandles[index] = new google.maps.Marker({
            map: map,
            position: position,
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 6,
                fillColor: '#FFFFFF',
                fillOpacity: 1,
                strokeColor: '#000000',
                strokeWeight: 3,
            },
            draggable: true
        });
        google.maps.event.addListener(dragHandles[index], 'mousedown', function(event) { dragHandleMouseDown(event); });
        google.maps.event.addListener(dragHandles[index], 'mouseup', function(event) { dragHandleMouseUp(event); });
    } else {
        dragHandles[index].setPosition(position);
    }
};

这很好，我可以在地图上拖动标记，但如何将它们链接到我渲染的任何路线？

功能：

渲染方向

var renderDirections = function(index, response) {
    directions[index] = [];
    routeDistance[index] = [];
    routeDuration[index] = [];
    for (var i = 0; i < response.routes.length; i++) {
        var route = response.routes[i];
        var legs = route.legs;
        routeDistance[index][i] = 0;
        routeDuration[index][i] = 0;
        var directionsRendererRequest = {
            map: map,
            directions: response,
            routeIndex: i,
            draggable: true,
            suppressInfoWindows: true,
            suppressMarkers: true,
            suppressPolylines: true
        };
        directions[index][i] = new google.maps.DirectionsRenderer(directionsRendererRequest);
        routeDistance[index][i] = legs[0].distance.value;
        routeDuration[index][i] = legs[0].duration.text;
    }
    handleRouteDistance(index, 0);
};

renderDirectionsMarkers

var renderDirectionsMarkers = function(index, response) {
    markers[index] = [];
    var leg = response.routes[0].legs[0];
    var positions = [
        { lat: leg.start_location.lat(), lng: leg.start_location.lng() },
        { lat: leg.end_location.lat(), lng: leg.end_location.lng() }
    ];
    for (var i = 0; i < positions.length; i++) {
        var markerOptions = {
            map: map,
            position: positions[i],
            label: labels[(index + i) % labels.length]
        };
        markers[index][i] = new google.maps.Marker(markerOptions);
    }
};

renderDirections多段线

var renderDirectionsPolylines = function(index, response) {
    polylines[index] = [];
    for (var i = 0; i < response.routes.length; i++) {
        var route = response.routes[i];
        var legs = route.legs;
        var strokeColor = i > 0 ? strokeColorInactive : strokeColorActive;
        var zIndex = i > 0 ? 0 : 1;
        var polylineOptions = {
            strokeColor: strokeColor,
            strokeOpacity: 1,
            strokeWeight: 4,
            zIndex: zIndex
        };
        polylines[index][i] = [];
        for (var j = 0; j < legs.length; j++) {
            var steps = legs[j].steps;
            for (var k = 0; k < steps.length; k++) {
                var nextSegment = steps[k].path;
                var stepPolyline = new google.maps.Polyline(polylineOptions);
                for (var l = 0; l < nextSegment.length; l++) {
                    stepPolyline.getPath().push(nextSegment[l]);
                }
                stepPolyline.setMap(map);
                polylines[index][i][k] = stepPolyline;
                // Add event listeners.
                google.maps.event.addListener(stepPolyline, 'mouseover', function(event) { polylineMouseover(index, i, event, this); });
                google.maps.event.addListener(stepPolyline, 'mousemove', function(event) { polylineMousemove(index, i, event); });
                google.maps.event.addListener(stepPolyline, 'mouseout', function(event) { polylineMouseout(index, i, event); });
                google.maps.event.addListener(stepPolyline, 'click', function(event) { polylineClick(index, i, event); });
            }
        }
    }
};