Question

我试图在数据层上添加一些多边形。我已经定义了它们应该具有的颜色。我的问题是，我无法为每个设置颜色，但如果我设置样式，它就会变成一种全局风格。

我试着用随机颜色：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -34.872, lng: 155.252},
  });

  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];
  var innerCoords3 = [
    {lat: -33.979, lng: 157.987},
    {lat: -34.979, lng: 157.987},
    {lat: -34.979, lng: 158.987},
    {lat: -33.979, lng: 158.987}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([innerCoords1,
                                                        innerCoords2,
                                                        innerCoords3])});
       map.data.setStyle(function(feature) {return {fillColor: getRandomColor(),strokeWeight: 5}})                                                                                              
}

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

如何为每个矩形定义不同且独特的样式（填充颜色），有人可以帮助我吗？

Answer 1

您的getRandomColor功能不会给您不同的颜色，因为它只调用一次。如果我根据它为每个Polygon分配一个id和索引到一个数组中，我得到不同的颜色（我假设你真的不需要随机颜色）。

var colorArray = ["#FF0000", "#00FF00", "#0000FF"];
map.data.setStyle(function(feature) {
  var color = colorArray[feature.getId()];
  return {
    fillColor: color,
    strokeWeight: 5
  }
});

如果我将其称为与上述相同（在返回的样式之外），它对我有用：

map.data.setStyle(function(feature) {
  var color = getRandomColor();
  return {
    fillColor: color,
    strokeWeight: 5
  }
});

proof of concept fiddle

代码段

＆＃13;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: -34.872,
      lng: 155.252
    },
  });

  var innerCoords1 = [{
    lat: -33.364,
    lng: 154.207
  }, {
    lat: -34.364,
    lng: 154.207
  }, {
    lat: -34.364,
    lng: 155.207
  }, {
    lat: -33.364,
    lng: 155.207
  }];

  var innerCoords2 = [{
    lat: -33.364,
    lng: 156.207
  }, {
    lat: -34.364,
    lng: 156.207
  }, {
    lat: -34.364,
    lng: 157.207
  }, {
    lat: -33.364,
    lng: 157.207
  }];
  var innerCoords3 = [{
    lat: -33.979,
    lng: 157.987
  }, {
    lat: -34.979,
    lng: 157.987
  }, {
    lat: -34.979,
    lng: 158.987
  }, {
    lat: -33.979,
    lng: 158.987
  }];

  map.data.add({
    id: 0,
    geometry: new google.maps.Data.Polygon([innerCoords1])
  });
  map.data.add({
    id: 1,
    geometry: new google.maps.Data.Polygon([innerCoords2])
  });
  map.data.add({
    id: 2,
    geometry: new google.maps.Data.Polygon([innerCoords3])
  });
  var colorArray = ["#FF0000", "#00FF00", "#0000FF"];
  map.data.setStyle(function(feature) {
    var color = colorArray[feature.getId()];
    return {
      fillColor: color,
      strokeWeight: 5
    }
  });
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  console.log(color);
  return color;
}
google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

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

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

无法在Google地图Polygon上定义样式

1 个答案: