Javascript - Google Map 多条不同颜色的折线答案

【问题标题】：Javascript - Google Map multiple polylines of different colorsJavascript - Google Map 多条不同颜色的折线
【发布时间】：2021-04-15 09:16:46
【问题描述】：

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

借助一些教程，我已经能够在 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 上找到。

【问题讨论】：

您显然对每条折线线使用了相同的颜色。此外，多边形和折线是两种不同的东西。为什么要使用仅适用于多边形（fillColor、fillOpacity）的参数创建折线？

标签： google-maps google-polyline

【解决方案1】：

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

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

Updated fiddle

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

代码 sn-p：

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", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#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,
      strokeColor: colors[polygons.length % colors.length],
      strokeOpacity: 0.8,
      strokeWeight: 2,
      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>

【讨论】：