Question

我正在尝试将目的地航点的颜色从红色变为绿色。目前遵循示例中的代码：

我用Google搜索，但找不到答案。

非常感谢提前。

Answer 1

我担心你不能。

你可以做的是传递google.maps.DirectionsRenderer一个选项对象来完全禁用标记

var DirectionsRenderer= new google.maps.DirectionsRenderer({map:map, suppressMarkers: true});

然后使用您传递给google.maps.DirectionsService实例的来源和目标位置自行添加自定义标记。

Answer 2

proof of concept fiddle

// global variables to keep the start and end locations
var startLocation = {};
var endLocation = {};

解析路线响应，在路线的起点和终点放置自定义标记

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];
        var summaryPanel = document.getElementById('directions_panel');
        summaryPanel.innerHTML = '';
        // For each route, display summary information.
        for (var i = 0; i < route.legs.length; i++) {
            var routeSegment = i + 1;
            summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
            summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
            summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
            summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
        }
        var path = response.routes[0].overview_path;
        var legs = response.routes[0].legs;
        for (i = 0; i < legs.length; i++) {
            if (i == 0) {
                startLocation.latlng = legs[i].start_location;
                startLocation.address = legs[i].start_address;
                createMarker(legs[i].start_location, "start", legs[i].start_address, "green");
            }
            endLocation.latlng = legs[i].end_location;
            endLocation.address = legs[i].end_address;
        }
    }

    createMarker(endLocation.latlng, "end", endLocation.address, "red");

自定义标记功能（如果您只需要2个标记，则可以简化此操作）：

var icons = [];
icons["red"] = {
    url:  'http://maps.google.com/mapfiles/ms/micons/red.png',
    // This marker is 34 pixels wide by 34 pixels tall.
    size: new google.maps.Size(34, 34),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is at 9,34.
    anchor: new google.maps.Point(17, 34)
};

function getMarkerImage(iconColor) {
    if ((typeof (iconColor) == "undefined") || (iconColor == null)) {
        iconColor = "red";
    }
    if (!icons[iconColor]) {
        icons[iconColor] = {
            url: "http://maps.google.com/mapfiles/ms/micons/" + iconColor + ".png",
            // This marker is 34 pixels wide by 34 pixels tall.
            size: new google.maps.Size(34, 34),
            // The origin for this image is 0,0.
            origin: new google.maps.Point(0, 0),
            // The anchor for this image is at 6,20.
            anchor: new google.maps.Point(17, 34)
        };
    }
    return icons[iconColor];

}
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.

// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.

var iconImage = {
    url: 'http://maps.google.com/mapfiles/ms/micons/red.png',
    // This marker is 20 pixels wide by 34 pixels tall.
    size: new google.maps.Size(20, 34),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is at 9,34.
    anchor: new google.maps.Point(9, 34)
};
// Shapes define the clickable region of the icon.
// The type defines an HTML &lt;area&gt; element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var iconShape = {
    coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
    type: 'poly'
};
var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});


function createMarker(latlng, label, html, color) {
    var contentString = '<b>' + label + '</b><br>' + html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: getMarkerImage(color),
        shape: iconShape,
        title: label,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });
    marker.myname = label;
    gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });
}

更改目的地航点的颜色：Google路线服务

2 个答案: