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>