Color variations Polyline property in Google maps API

问题

I have requirement such that I need to draw a line between Sydney, Melbourne and Adelaide and the line between Sydney and Adelaide should be dark in color and the line between Melbourne and Adelaide should be lighter.

Is it possible in current API to provide this functionality in a single object:

new google.maps.Polyline({
});

To achieve the functionality?

回答1:

One option would be to create google.maps.Polyline object per every line, below is provided the modified example from Simple Polylines page:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: -32.9340105, lng: 128.2698231},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var flightPlanCoordinates = [
    {lat: -33.877024, lng: 151.227963},
    {lat: -37.816567, lng: 144.961489},
    {lat: -34.930054, lng: 138.593065}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates.slice(0,2),
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });

   var flightPath2 = new google.maps.Polyline({
    path: flightPlanCoordinates.slice(1,3),
    geodesic: true,
    strokeColor: '#FFCC00',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });
}

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
#map {
        height: 100%;
}

 <div id="map"></div>
 <script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

回答2:

A single polyline has a single set of properties. You can do it with a single google.maps.Polyline for each unique set of properties, so in your example, two polylines.

来源：https://stackoverflow.com/questions/34114183/color-variations-polyline-property-in-google-maps-api