Изменение цвета обводки из нескольких полилиний на карте Google v3

Question

Мне нужно создать несколько полилиний, каждая со своим цветом, и их маркеры связаны друг с другом, я использую карту Google v3.

Например, у меня есть пять маркеров, и все они связаны друг с другом с помощью полилиний красного цвета. Теперь я хочу показать эту красную полилинию в нескольких цветовых схемах: первая полилиния зеленым, вторая синим, третья черным и т. Д.

Вот мой код

<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

Загрузите параметры маркера и цвет для полилиний в массив json и проведите их по кругу, создавая маркеры и полилинии.

Надеюсь, это поможет вам.

Answer 2

установите эту часть вашего кода в цикл for как

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

Это будет нормально работать