Google Maps Api v3：如何更改Directions（set）面板中的默認航點標記？

Question

如何更改指示面板中地圖中活動的自定義標記的標記並更改顏色以及身體的顏色？任何幫助非常感謝。

的截圖：

http://i.stack.imgur.com/wYFoc.png

Answer 1

只是爲了永葆@MrUpsidown註釋和代碼活着：

簡短的回答：你不能。較長的回答：不要使用面板 面板。用您需要的信息（來自 路線服務響應）創建您自己的，並添加您的自定義標記。

Nov 24 at 16:32

Fiddle

var directionsDisplay; 
 
var directionsService = new google.maps.DirectionsService(); 
 
var map; 
 
var routeBounds = false; 
 
var overlayWidth = 200; // Width of the overlay DIV 
 
var leftMargin = 30; // Grace margin to avoid too close fits on the edge of the overlay 
 
var rightMargin = 80; // Grace margin to avoid too close fits on the right and leave space for the controls 
 

 
overlayWidth += leftMargin; 
 

 
var start = new google.maps.LatLng(3.148173, 101.7148792); 
 
var end = new google.maps.LatLng(3.1347725, 101.6893408); 
 

 
function initialize() { 
 

 
    var btn1 = document.getElementById('calcRoute'); 
 
    btn1.addEventListener('click', calcRoute); 
 

 
    var btn2 = document.getElementById('offsetMap'); 
 
    btn2.addEventListener('click', offsetMap); 
 

 
    var btn3 = document.getElementById('fitAndOffsetMap'); 
 
    btn3.addEventListener('click', fitAndOffsetMap); 
 

 
    var btn4 = document.getElementById('fitMap'); 
 
    btn4.addEventListener('click', fitMap); 
 

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

 
    var mapOptions = { 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     center: start, 
 
     panControlOptions: { 
 
      position: google.maps.ControlPosition.TOP_RIGHT 
 
     }, 
 
     zoomControlOptions: { 
 
      position: google.maps.ControlPosition.TOP_RIGHT 
 
     } 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
 
    directionsDisplay.setMap(map); 
 
} 
 

 
function offsetMap() { 
 

 
    if (routeBounds !== false) { 
 

 
     // Clear listener defined in directions results 
 
     google.maps.event.clearListeners(map, 'idle'); 
 

 
     // Top right corner 
 
     var topRightCorner = new google.maps.LatLng(map.getBounds().getNorthEast().lat(), map.getBounds().getNorthEast().lng()); 
 

 
     // Top right point 
 
     var topRightPoint = fromLatLngToPoint(topRightCorner).x; 
 

 
     // Get pixel position of leftmost and rightmost points 
 
     var leftCoords = routeBounds.getSouthWest(); 
 
     var leftMost = fromLatLngToPoint(leftCoords).x; 
 
     var rightMost = fromLatLngToPoint(routeBounds.getNorthEast()).x; 
 

 
     // Calculate left and right offsets 
 
     var leftOffset = (overlayWidth - leftMost); 
 
     var rightOffset = ((topRightPoint - rightMargin) - rightMost); 
 

 
     // Only if left offset is needed 
 
     if (leftOffset >= 0) { 
 

 
      if (leftOffset < rightOffset) { 
 

 
       var mapOffset = Math.round((rightOffset - leftOffset)/2); 
 

 
       // Pan the map by the offset calculated on the x axis 
 
       map.panBy(-mapOffset, 0); 
 

 
       // Get the new left point after pan 
 
       var newLeftPoint = fromLatLngToPoint(leftCoords).x; 
 

 
       if (newLeftPoint <= overlayWidth) { 
 

 
        // Leftmost point is still under the overlay 
 
        // Offset map again 
 
        offsetMap(); 
 
       } 
 

 
      } else { 
 

 
       // Cannot offset map at this zoom level otherwise both leftmost and rightmost points will not fit 
 
       // Zoom out and offset map again 
 
       map.setZoom(map.getZoom() - 1); 
 
       offsetMap(); 
 
      } 
 
     } 
 
    } 
 
} 
 

 
function fromLatLngToPoint(latLng) { 
 

 
    var scale = Math.pow(2, map.getZoom()); 
 
    var nw = new google.maps.LatLng(map.getBounds().getNorthEast().lat(), map.getBounds().getSouthWest().lng()); 
 
    var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw); 
 
    var worldCoordinate = map.getProjection().fromLatLngToPoint(latLng); 
 

 
    return new google.maps.Point(Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale), Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)); 
 
} 
 

 
function calcRoute() { 
 

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

 
      // Define route bounds for use in offsetMap function 
 
      routeBounds = response.routes[0].bounds; 
 

 
      // Write directions steps 
 
      writeDirectionsSteps(response.routes[0].legs[0].steps); 
 

 
      // Wait for map to be idle before calling offsetMap function 
 
      google.maps.event.addListener(map, 'idle', function() { 
 

 
       // Offset map 
 
       offsetMap(); 
 
      }); 
 

 
      // Listen for directions changes to update bounds and reapply offset 
 
      google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
 

 
       // Get the updated route directions response 
 
       var updatedResponse = directionsDisplay.getDirections(); 
 

 
       // Update route bounds 
 
       routeBounds = updatedResponse.routes[0].bounds; 
 

 
       // Fit updated bounds 
 
       map.fitBounds(routeBounds); 
 

 
       // Write directions steps 
 
       writeDirectionsSteps(updatedResponse.routes[0].legs[0].steps); 
 

 
       // Offset map 
 
       offsetMap(); 
 
      }); 
 
     } 
 
    }); 
 
} 
 

 
function writeDirectionsSteps(steps) { 
 

 
    var overlayContent = document.getElementById("overlayContent"); 
 
    overlayContent.innerHTML = ''; 
 

 
    for (var i = 0; i < steps.length; i++) { 
 

 
     overlayContent.innerHTML += '<p>' + steps[i].instructions + '</p><small>' + steps[i].distance.text + '</small>'; 
 
    } 
 
} 
 

 
function fitMap() { 
 

 
    if (routeBounds !== false) { 
 

 
     map.fitBounds(routeBounds); 
 
    } 
 
} 
 

 
function fitAndOffsetMap() { 
 

 
    if (routeBounds !== false) { 
 

 
     map.fitBounds(routeBounds); 
 
     offsetMap(); 
 
    } 
 
} 
 

 
initialize();

body { 
 
    margin:0; 
 
    padding:0; 
 
    font-family: Arial; 
 
} 
 
#map-canvas { 
 
    height:450px; 
 
    width:950px; 
 
} 
 
#overlay { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 450px; 
 
    background: black; 
 
    opacity: .8; 
 
    top: 0; 
 
    left: 0; 
 
    overflow: auto; 
 
} 
 
#overlayContent { 
 
    color: white; 
 
    padding: 10px 20px; 
 
} 
 
#overlayContent p { 
 
    font-size: 12px; 
 
    margin: 6px 0; 
 
} 
 
#overlayContent small { 
 
    display: block; 
 
    text-align: right; 
 
    font-style: italic; 
 
} 
 
small { 
 
    font-size: 9px; 
 
} 
 
i { 
 
    color: lightblue; 
 
} 
 
h1 { 
 
    font-size: 20px; 
 
} 
 
h5 { 
 
    font-size: 12px; 
 
} 
 
button { 
 
    margin: 20px 0 0 20px; 
 
}

<div id="map-canvas"></div> 
 
<div id="overlay"> 
 
    <div id="overlayContent"> 
 
     <h1>DIV OVERLAY</h1> 
 

 
     <h5>Routes should not be drawn below this element.</h5> 
 

 
     <h5>Click the <i>Calc route</i> button to draw the directions route.</h5> 
 

 
     <h5><i>Map offset</i> will be applied automatically.</h5> 
 

 
     <h5><i>Drag the route</i> to see how it is applied.</h5> 
 

 
     <h5>Click the <i>Offset map</i> button to reapply the offset.</h5> 
 

 
     <h5>Click the <i>Fit only</i> button to only fit route bounds.</h5> 
 

 
     <h5>Click the <i>Fit and offset map</i> button to fit to route bounds and reapply offset.</h5> 
 

 
    </div> 
 
</div> 
 
<button id="calcRoute">Calc route</button> 
 
<button id="offsetMap">Offset map</button> 
 
<button id="fitMap">Fit only</button> 
 
<button id="fitAndOffsetMap">Fit and offset map</button> 
 

 
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry" type="text/javascript"></script>