Question

我对谷歌地图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();

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

2 个答案: