Ändern der Farbe der Mehrfach-Polylinien auf der Google Map v3

Question

Ich muss mehrere Polylinien erstellen, jede mit ihrer eigenen Farbe, und ihre Marker sind miteinander verbunden, ich verwende Google Map v3.

Ich habe zum Beispiel fünf Marker, die alle durch rote Linienzüge miteinander verbunden sind. Nun möchte ich diese rote Polylinie in mehreren Farbschemata anzeigen, die erste Polylinie in Grün, die zweite in Blau, die dritte in Schwarz und so weiter.

Hier ist mein Code

<script type='text/javascript'>
var poly;
var map;
var path;
var i = parseInt(0, 10);
var marker;          

function initialize() {
  var chicago = new google.maps.LatLng(41.879535, -87.624333);
  var myOptions = {
    zoom: 7,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  }
  poly = new google.maps.Polyline(polyOptions);
  poly.setMap(map);
  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', addLatLng);
}

/**
* Handles click events on a map, and adds a new point to the Polyline.
* @param {MouseEvent} mouseEvent
*/
function addLatLng(event) {
  i++;
  //var path = poly.getPath();
  path = poly.getPath();
  var polyOptions2 = {
    strokeColor: '#FFFFFF',
    strokeOpacity: 1.0,
    strokeWeight: 3
  }
  if (i == 2) {
    poly.setOptions(polyOptions2);

  }
  else {
    polyOptions2.strokeColor = "#FF0000";
    poly.setOptions(polyOptions2);
  }
  path.push(event.latLng);
  // Add a new marker at the new plotted point on the polyline.
  marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}
</script>

Answer 1

Laden Sie Ihre Markierungsoptionen und die Farbe für die Polylinien in ein json-Array und führen Sie eine Schleife durch, um die Markierungen und Polylinien zu erstellen.

Ich hoffe, das hilft Ihnen weiter.

Answer 2

Setzen Sie diesen Teil Ihres Codes in eine for-Schleife wie

       var colorVariable = ["red","green","blue","yellow","black"];

        for(var a =0;a<=5;a++){
              var polyOptions = {
                strokeColor: colorVariable[a],
                strokeOpacity: 1.0,
                strokeWeight: 2
              }
              poly = new google.maps.Polyline(polyOptions);
              poly.setMap(map);
        }

Es wird gut funktionieren