Directions API 上的自定义 Google 地图标记

Question

我对 Google 地图 api 完全陌生，在汇总了网上找到的几个示例后，我正在努力解决向方向添加自定义标记的最后一道障碍。这是我的代码：

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
    var latlng = new google.maps.LatLng([[showMapLatitude]],[[showMapLongitude]]);
    directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
    var myOptions = {
        zoom: 14,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };

var stylez = [
{
  featureType: "all",
  elementType: "all",
  stylers: [
    { saturation: -100 }
  ]
}
];


var image = new google.maps.MarkerImage('/icon.png',
    new google.maps.Size(20, 33),
    new google.maps.Point(0,0),
    new google.maps.Point(10,33)
);

    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
            var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });
            map.mapTypes.set('tehgrayz', mapType);
            map.setMapTypeId('tehgrayz');    
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    var marker = new google.maps.Marker({
        position: latlng, 
        map: map, 
        title:"[[*pagetitle]]",
                    icon: image
    });

}



function calcRoute() {
            $(".storeDetails").hide();
            $(".storeAdress").hide();
            $(".backtocontact").show();
    var start = document.getElementById("routeStart").value;
    var end = "[[showMapLatitude]],[[showMapLongitude]]";
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

这里有一个例子：Change individual markers in google maps directions api V3

但是作为一个菜鸟，我似乎无法将它放在正确的位置，它要么出错，要么什么都不做。

Answer 1

改变

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    }
});

收件人

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        var leg = response.routes[ 0 ].legs[ 0 ];
        makeMarker( leg.start_location, icons.start, "title" );
        makeMarker( leg.end_location, icons.end, 'title' );
    }
});

别忘了添加makeMarker() 函数。 您还需要开始和结束图标

Answer 2

回复my other answer中的评论

移除原来的自定义标记并显示默认标记

删除

var image = new google.maps.MarkerImage('/icon.png',
new google.maps.Size(20, 33),
new google.maps.Point(0,0),
new google.maps.Point(10,33)
);

和

var marker = new google.maps.Marker({
    position: latlng, 
    map: map, 
    title:"[[*pagetitle]]",
                icon: image
});

也要改变

directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});

收件人

directionsDisplay = new google.maps.DirectionsRenderer();