Google maps Javascript-Google映射不同颜色的多段线

作为项目的一部分，我目前正在地图上绘制多条线

在一些教程的帮助下，我已经能够在谷歌地图上绘制多条多段线。但是，所有的多段线都是相同的颜色，我希望它们有不同的颜色。我该怎么做

JS文件

var map, infoWindow;
function initialize() {
  var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

   var bounds = new google.maps.LatLngBounds();
  var polygons = [];
 var arr = new Array();
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var coordinates = {
    "feed1": [
        [ 25.774252,  -80.190262 ],
        [18.466465,-66.118292 ],
        [32.321384, -64.75737],
        [25.774252, -80.190262 ]
    ],
    
     "feed2": [
        [26.774252, -81.190262],
        [ 19.466465, -67.118292 ],
        [33.321384,-65.75737 ],
        [26.774252, -81.190262 ]
    ],
    
     "feed3": [
        [27.774252, -82.190262],
        [ 20.466465, -68.118292 ],
        [34.321384,-66.75737 ],
        [27.774252, -82.190262 ]
    ]
};
   for (var i in coordinates) {
           arr = [];

   for (var j=0; j < coordinates[i].length; j++) {
              arr.push( new google.maps.LatLng(
                    parseFloat(coordinates[i][j][0]),
                    parseFloat(coordinates[i][j][1])
              ));
                
              bounds.extend(arr[arr.length-1])
  
            }
                  
  polygons.push(new google.maps.Polyline({
                path: arr,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            }));
            polygons[polygons.length-1].setMap(map);      
            
            var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });

google.maps.event.addListener(polygons[polygons.length-1], 'click', function(event) {
  infowindow.open(map);
  infowindow.setPosition(event.latLng);
  });     
            
}
 map.fitBounds(bounds);
}


google.maps.event.addDomListener(window, 'load', initialize);

代码也可以在此处找到。

相关问题：

创建要应用于多段线的颜色数组：

在多段线构造函数中使用该数组：

（也可以在输入数据中包含所需的颜色）

代码片段：

var映射，信息窗口；
函数初始化（）{
变量映射选项={
缩放：6，
中心：新google.maps.LatLng（24.886436490787712，-70.2685546875），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var bounds=new google.maps.LatLngBounds（）；
var=[]；
var arr=新数组（）；
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
变量颜色=[“FF0000”、“00FF00”、“0000FF”、“FF00”、“FF00FF”、“FF00FF”、“00FFFF”]；
变量坐标={
“feed1”：[
[25.774252, -80.190262],
[18.466465, -66.118292],
[32.321384, -64.75737],
[25.774252, -80.190262]
],
“feed2”：[
[26.774252, -81.190262],
[19.466465, -67.118292],
[33.321384, -65.75737],
[26.774252, -81.190262]
],
“feed3”：[
[27.774252, -82.190262],
[20.466465, -68.118292],
[34.321384, -66.75737],
[27.774252, -82.190262]
]
};
用于（坐标中的变量i）{
arr=[]；
对于（var j=0；j<坐标[i]。长度；j++）{
arr.push（新的google.maps.LatLng）(
parseFloat（坐标[i][j][0]），
parseFloat（坐标[i][j][1]）
));
bounds.extend（arr[arr.length-1]）
}
console.log（coordinates.feed2）
polygons.push（新的google.maps.Polyline({
路径：arr，
strokeColor:colors[polygons.length%colors.length]，
笔划不透明度：0.8，
冲程重量：2，
fillColor:colors[polygons.length%colors.length]，
不透明度：0.35
}));
多边形[polygons.length-1].setMap（map）；
var infowindow=new google.maps.infowindow({
内容：“你好，世界！”
});
google.maps.event.addListener（多边形[polygons.length-1]，“单击”，函数（事件）{
打开（地图）；
infowindow.setPosition（event.latLng）；
});
}
映射边界（bounds）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体，
#地图画布{
身高：100%；
边际：0px；
填充：0px；
}
显然，您对每条多段线都使用相同的颜色。此外，多边形和多段线是两种不同的东西。为什么创建的多段线的参数仅适用于多边形（
fillColor
，
fillOpacity
）？
   <div id="map-canvas"></div>

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

  var colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF"];

polygons.push(new google.maps.Polyline({
      path: arr,
      strokeColor: colors[polygons.length % colors.length],
      strokeOpacity: 0.8,
      strokeWeight: 2,
    }));
    polygons[polygons.length - 1].setMap(map);