Javascript - 谷歌地图多条不同颜色的折线

如何解决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);

HTML 文件

   <div id="map-canvas"></div>

CSS

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

也可以在此处的 Fiddle 上找到代码。

解决方法

相关问题：how to draw a google maps waypoint with multi-colored polylines

1. 制作一组颜色以应用于折线：

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

2. 在折线构造函数中使用该数组：

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

Updated fiddle

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

代码片段：

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 colors = ["#FF0000","#00FFFF"];

  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])

    }
    console.log(coordinates.feed2)

    polygons.push(new google.maps.Polyline({
      path: arr,fillColor: colors[polygons.length % colors.length],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);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>