Question

我正在使用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);
    }
};

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

功能：

renderDirections

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

renderDirectionsPolylines

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

Answer 1

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

如果您在线上设置标记并将其拖动到某处，则必须删除旧线（x ......... y）并设置2个新线（x ..... m和m ....... z）。

这是你在找什么？这是一个例子：Gmap study: multi auto routes/direction with unlimited waypoints click by click

HTH，Reinhard

Maps API自定义可拖动方向

1 个答案: