Как указать уникальный цвет для каждого полигона с помощью карт Google?

Question

Мне нужно указать разные цвета для каждого многоугольника, используя карты Google, пока это мой код:

var colors = ['#3366CC','#DC3912','#FF9900','#109618','#990099','#3B3EAC','#0099C6','#DD4477','#66AA00','#B82E2E','#316395','#994499','#22AA99','#AAAA11','#6633CC','#E67300','#8B0707','#329262','#5574A6','#3B3EAC']

for (i=0;i<response.length;i++){
    x=wellknown.parse(response[i].geom);
    map.data.addGeoJson(x);
    map.data.setStyle({
        fillColor: colors[i],
        strokeWeight: 1
    })
}

Но это не работает так, как я ожидаю, это переписывает стиль всех полигонов стилем последнего, как я могу это сделать, пожалуйста?

кодекс для проблемы

Answer 1

Используйте функцию стиля , чтобы установить цвет на основе свойства многоугольника.

var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];

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

function init() {
  var mapElement = document.getElementById('map');
  var pos = {
    lat: 34.963442,
    lng: -4.132102
  };
  var map = new google.maps.Map(mapElement, {
    zoom: 7,
    center: pos
  });
  for (i = 0; i < response.length; i++) {
    response[i].features[0].properties = {
      polyNum: i
    }
    map.data.addGeoJson(response[i]);
  }
  map.data.setStyle(function(feat) {
    return {
      fillColor: colors[feat.getProperty("polyNum")],
      strokeWeight: 1
    }
  })
}

подтверждение концепции скрипта

фрагмент кода:

response = [{
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "MultiPolygon",
      "coordinates": [
        [
          [
            [-5.728815299999951, 35.700733600000035],
            [-5.72649569999993, 35.695227000000045],
            [-5.72263339999995, 35.687280100000066],
            //snip
            [-6.029523099999949, 35.47567980000008],

            // snip
            [-5.931709999999953, 35.78152110000008],
            [-5.732892299999946, 35.69954860000007],
            [-5.728815299999951, 35.700733600000035]
          ]
        ]
      ]
    }
  }]
}, {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "MultiPolygon",
      "coordinates": [
        [
          [
            [-4.365168599999947, 35.15238920000007],
            [-4.365278599999954, 35.15236920000007],
            [-4.365262499999972, 35.15244370000005],
            [-4.36521149999993, 35.15243510000005],
            [-4.365168599999947, 35.15238920000007]
          ]
        ],
        [
          [
            [-4.3649855999999545, 35.15214580000003],
            [-4.3650431999999455, 35.15209070000003],
            [-4.365078099999948, 35.15210710000008],
            [-4.36509419999993, 35.152131300000065],
            [-4.365201499999955, 35.15215320000004],
            [-4.365079499999979, 35.15220030000006],
            [-4.365028499999937, 35.15219160000004],
            [-4.3649855999999545, 35.15214580000003]
          ]
        ],
        [
          [
            [-4.366129499999943, 35.15200100000004],
            [-4.366239499999949, 35.151981000000035],
            [-4.366223399999967, 35.152055500000074],
            [-4.366172399999925, 35.15204680000005],
            [-4.366129499999943, 35.15200100000004]
          ]
        ],
        [
          [
            [-4.366694199999927, 35.15164400000003],
            [-4.366804199999933, 35.15162400000003],
            [-4.366788099999951, 35.151698500000066],
            [-4.366691499999945, 35.151729300000056],
            [-4.366694199999927, 35.15164400000003]
          ]
        ],
        [
          [
            [-4.365267299999971, 35.15227530000004],
            [-4.365322899999967, 35.15226450000006],
            [-4.365361199999938, 35.15222490000008],
            [-4.3654469999999606, 35.15222710000006],
            [-4.365455599999962, 35.15232430000003],
            [-4.365443999999968, 35.15235420000005],
            [-4.36534219999993, 35.15234540000006],
            [-4.365279299999941, 35.15230290000005],
            [-4.365267299999971, 35.15227530000004]
          ]
        ],
        [
          [
            [-4.365066099999979, 35.15270730000003],
            [-4.365264599999932, 35.15273810000008],
            [-4.365387999999939, 35.15288280000004],
            [-4.365108999999961, 35.15280380000007],
            [-4.365066099999979, 35.15270730000003]
          ]
        ],
        [
          [
            [-4.359619499999951, 35.15125780000005],
            [-4.360025599999972, 35.150890900000036],
            [-4.3600845999999365, 35.15091280000007],
            [-4.360181199999943, 35.15144350000003],
            [-4.360692999999969, 35.15219440000004],
            [-4.360843199999977, 35.152966400000025],
            [-4.360895299999925, 35.15297430000004],
            [-4.360920799999974, 35.15298910000007],
            [-4.360934199999974, 35.15302090000006],
            [-4.36091209999995, 35.15304660000004],
            [-4.360845599999948, 35.153045500000076],
            [-4.360853099999929, 35.15329660000003],
            [-4.360564799999963, 35.15332730000006],
            [-4.360570099999961, 35.153376700000024],
            [-4.360697499999958, 35.15346880000004],
            [-4.360800599999948, 35.15360270000008],
            [-4.360794099999964, 35.15370010000004],
            [-4.360508399999958, 35.15367270000007],
            [-4.3601350999999795, 35.15384360000007],
            [-4.359662999999955, 35.153975100000025],
            [-4.359695199999976, 35.15366810000006],
            [-4.359566499999971, 35.153519000000074],
            [-4.359523599999932, 35.15299270000003],
            [-4.359328099999971, 35.15254580000004],
            [-4.359118999999964, 35.152525800000035],
            [-4.359000999999978, 35.15250170000007],
            [-4.358944699999938, 35.152337200000034],
            [-4.358864199999971, 35.15219460000003],
            [-4.358966199999941, 35.15194900000006],
            [-4.359072999999967, 35.15193130000006],
            [-4.359619499999951, 35.15125780000005]
          ]
        ],
        [
          [
            [-3.8118572999999287, 35.129859700000054],
            [-3.8139699999999266, 35.11749000000003],
            // snip
            [-3.8255157999999483, 34.90404140000004],
            // snip
            [-4.376043299999935, 35.15328130000006],
            [-3.8103843999999754, 35.135774000000026],
            [-3.811559999999929, 35.13160000000005],
            [-3.8118572999999287, 35.129859700000054]
          ]
        ]
      ]
    }
  }]
}, {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "MultiPolygon",
      "coordinates": [
        [
          [
            [-4.470361499999967, 35.079306700000075],
            [-4.476197999999954, 35.05781030000003],

            // snip
            [-5.207069099999956, 34.88052770000007],
            // snip
            [-4.482892799999945, 35.11470000000003],
            [-4.4942223999999555, 35.08295910000004],
            [-4.470361499999967, 35.079306700000075]
          ]
        ]
      ]
    }
  }]
}, {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "MultiPolygon",
      "coordinates": [
        [
          [
            [-2.0528876999999284, 34.48349570000005],
            [-2.0536608999999544, 34.48332490000007],
            // snip
            [-1.9856368999999745, 34.93244160000006],
            // snip
            [-1.9415678999999386, 34.86222920000006],
            // snip
            [-1.7713567999999782, 34.75961640000003],
            // snip
            [-2.05311839999996, 34.483884800000055],
            [-2.0528876999999284, 34.48349570000005]
          ]
        ]
      ]
    }
  }]
}];

var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];

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

function init() {
  var mapElement = document.getElementById('map');
  var pos = {
    lat: 34.963442,
    lng: -4.132102
  };
  var map = new google.maps.Map(mapElement, {
    zoom: 7,
    center: pos
  });
  for (i = 0; i < response.length; i++) {
    response[i].features[0].properties = {
      polyNum: i
    }
    map.data.addGeoJson(response[i]);
  }
  map.data.setStyle(function(feat) {
    return {
      fillColor: colors[feat.getProperty("polyNum")],
      strokeWeight: 1
    }
  })
}

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

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