无法在谷歌地图多边形上定义样式答案

【问题标题】：can't define style on google maps Polygon无法在谷歌地图多边形上定义样式
【发布时间】：2017-03-09 05:47:55
【问题描述】：

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

我试过喜欢，颜色随机：

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

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

【问题讨论】：

您的小提琴不包含任何代码（我可以看到）...
jsfiddle.net/dajtsd6e/1/#&togetherjs=4rBeGoz08I

标签： html css google-maps google-maps-api-3 maps

【解决方案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

代码 sn-p：

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

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

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

【讨论】：