Javascript 映射API自定义可拖动方向

我正在使用Google Maps JS API v3获取一些具有多条路线的方向、自定义多段线以选择每个方向的路线以及自定义位置标记。我已按如下方式设置渲染器选项：

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

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

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

我的原始代码如下：

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);
};

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);
    }
};

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); });
            }
        }
    }
};

var renderDirections=函数（索引、响应）{
方向[索引]=[]；
RouteInstance[索引]=[]；
路由[索引]=[]；
对于（var i=0；i

renderDirectionsMarkers

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);
};

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);
    }
};

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); });
            }
        }
    }
};

var renderDirectionsMarkers=函数（索引、响应）{
标记[索引]=[]；
var leg=response.routes[0]。legs[0]；
变量位置=[
{lat:leg.start_location.lat（），lng:leg.start_location.lng（）}，
{lat:leg.end_location.lat（），lng:leg.end_location.lng（）}
];
对于（变量i=0；i

渲染方向多段线

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);
};

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);
    }
};

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); });
            }
        }
    }
};

var renderdirectionspylines=函数（索引、响应）{
多段线[索引]=[]；
对于（var i=0；i0？strokeColorInactive：strokeColorActive；
var-zIndex=i>0？0:1；
var多段线选项={
strokeColor:strokeColor，
频闪不透明度：1，
冲程重量：4，
zIndex:zIndex
};
多段线[索引][i]=[]；
对于（var j=0；j

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

如果在直线上设置标记并将其拖动到某处，则必须删除旧直线（x………y）并设置两条新线（x………m和m………z）

这就是你要找的吗？这里有一个例子：

---

嗯，莱因哈德

谢谢你给我指明了正确的方向。非常感谢。