Google Maps API，生成线路径而不是圆路径

Question

生成的路径由一系列圆圈组成。我希望它成为一条线。谢谢！

var directionsDisplay = new google.maps.DirectionsRenderer({
    map:map, polylineOptions:{strokeColor: '#98c28a',
       strokeOpacity: 0,
       strokeWeight: 4,
       icons: [{
          icon: {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: '#98c28a',
          fillOpacity: 1,
          scale: 2,
          strokeColor: '#98c28a',
          strokeOpacity: 1,
       },
       offset: '0',
       repeat: '10px'
}]}, suppressMarkers:true });

Answer 1

从折线定义中移除icons，并使strokeOpacity非零

var directionsDisplay = new google.maps.DirectionsRenderer({
  map:map, 
  polylineOptions:{
    strokeColor: '#98c28a',
    strokeOpacity: 1.0,
    strokeWeight: 4
  },
  suppressMarkers:true 
});

proof of concept fiddle

代码段

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map,
    polylineOptions: {
      strokeColor: '#98c28a',
      strokeOpacity: 1.0,
      strokeWeight: 4,
    },
    suppressMarkers: true
  });
  var directionsService = new google.maps.DirectionsService();
  directionsService.route({
    origin: "New York, NY",
    destination: "Boston, MA",
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>