javascript - How to replace A and B markers in Google Map Api

Question

I'm using

google.maps.DirectionsRenderer({suppressMarkers: true})

to remove markers in Route. But this also removes waypoints markers in that route. So how to replace/remove 'A' and 'B' markers in a route?

Answer 1

这是一个用自定义标记替换所有标记的示例。

这是一个仅用自定义标记替换开始和结束标记的示例。

自定义方向渲染器（将方向渲染为原生多段线和标记）：

function RenderCustomDirections(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
     waypts = [];
     var bounds = new google.maps.LatLngBounds();
     var route = response.routes[0];
     var summaryPanel = document.getElementById("directions_panel");
     var detailsPanel = document.getElementById("direction_details");
     startLocation = new Object();
     endLocation = new Object();

     summaryPanel.innerHTML = "";
     detailsPanel.innerHTML = '<ul>';

     // 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;
         startLocation.marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
       } else { 
         waypts[i] = new Object();
         waypts[i].latlng = legs[i].start_location;
         waypts[i].address = legs[i].start_address;
         waypts[i].marker = createMarker(legs[i].start_location,"waypoint"+i,legs[i].start_address,"yellow");
       }
       endLocation.latlng = legs[i].end_location;
       endLocation.address = legs[i].end_address;
       var steps = legs[i].steps;
       for (j=0;j<steps.length;j++) {
         var nextSegment = steps[j].path;
            for (k=0;k<nextSegment.length;k++) {
              polyline.getPath().push(nextSegment[k]);
              bounds.extend(nextSegment[k]);
            }
          }
        }
        detailsPanel.innerHTML += "</ul>"
        polyline.setMap(map);
        map.fitBounds(bounds);
        endLocation.marker = createMarker(endLocation.latlng,"end",endLocation.address,"red");
        // == create the initial sidebar ==
        makeSidebar();
  } else alert(status);
}

createMarker 函数：

function createMarker(latlng, label, html, color) {
   var contentString = '<b>'+label+'</b><br>'+html;
   var marker = new google.maps.Marker({
        position: latlng,
        draggable: true, 
        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);
        });
   return marker;
}

自定义图标功能：

function getMarkerImage(iconColor) {
   if ((typeof(iconColor)=="undefined") || (iconColor==null)) { 
      iconColor = "red"; 
   }
   if (!icons[iconColor]) {
      icons[iconColor] = {
        url: "mapIcons/marker_"+ iconColor +".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 6,20.
        anchor: new google.maps.Point(9, 34));
   } 
   return icons[iconColor];
}