Google maps JavaScript data_layer несколько стилей

Question

У меня есть 3 полигона в Google Maps, инициализируемый javascript следующим образом:

map.data.add({geometry: new google.maps.Data.Polygon([google.maps.geometry.encoding.decodePath(path), google.maps.geometry.encoding.decodePath(path2), ])})
map.data.add({geometry: new google.maps.Data.Polygon([google.maps.geometry.encoding.decodePath(path2), google.maps.geometry.encoding.decodePath(path3), ])})
map.data.add({geometry: new google.maps.Data.Polygon([google.maps.geometry.encoding.decodePath(path3) ])})

Я установил стиль с помощью этого кода:

 map.data.setStyle({
           strokeColor: '#FF0000',
           strokeOpacity: 0.8,
           strokeWeight: 2,
           fillColor: '#FF0000',
           fillOpacity: 0.35
        }); 

Это устанавливает стиль для всех 3 полигонов´s.Но как я могу установить разные стили для каждого полигона?

Answer 1

Один из вариантов стилизации полигонов по-разному - дать им уникальные свойства, определяющие стиль. Например:

  map.data.add({
    geometry: new google.maps.Data.Polygon([google.maps.geometry.encoding.decodePath(path)]),
    properties: {
      color: 'blue'
    }
  })
  map.data.add({
    geometry: new google.maps.Data.Polygon([google.maps.geometry.encoding.decodePath(path2)]),
    properties: {
      color: 'green'
    }
  })
  map.data.add({
    geometry: new google.maps.Data.Polygon([google.maps.geometry.encoding.decodePath(path3)]),
    properties: {
      color: 'orange'
    }
  });

Затем создайте функцию стиля, которая использует это свойство для установки стиля (изменено на примере Google: https://developers.google.com/maps/documentation/javascript/examples/layer-data-dynamic):

  map.data.setStyle(function(feature) {
    var color = feature.getProperty('color');
    return /** @type {!google.maps.Data.StyleOptions} */ ({
      fillColor: color,
      strokeColor: color,
      strokeWeight: 2
    });
  });

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

доказательство концепции с вложенными полигонами

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

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addListener(map, 'click', function(e) {
    console.log(e.latLng.toUrlValue(6));
  })
  var pathCoords = [{lat: 37.4687,lng: -122.151627},
    {lat: 37.453575,lng: -122.165704},
    {lat: 37.453575,lng: -122.141156}
  ];
  var pathCoords2 = [{lat: 37.437902,lng: -122.174802},
    {lat: 37.425089,lng: -122.182355},
    {lat: 37.425225,lng: -122.163987}
  ];
  var pathCoords3 = [{lat: 37.431087,lng: -122.103562},
    {lat: 37.415409,lng: -122.114549},
    {lat: 37.415954,lng: -122.096009}
  ];

  function convert2LatLng(input) {
    var pathLatLng = [];
    for (var i = 0; i < input.length; i++) {
      var pt = new google.maps.LatLng(input[i].lat, input[i].lng);
      pathLatLng.push(pt);
    }
    return pathLatLng;
  }

  var path = google.maps.geometry.encoding.encodePath(convert2LatLng(pathCoords));
  var path2 = google.maps.geometry.encoding.encodePath(convert2LatLng(pathCoords2));
  var path3 = google.maps.geometry.encoding.encodePath(convert2LatLng(pathCoords3));
  map.data.add({
    geometry: new google.maps.Data.Polygon([google.maps.geometry.encoding.decodePath(path)]),
    properties: {
      color: 'blue'
    }
  })
  map.data.add({
    geometry: new google.maps.Data.Polygon([google.maps.geometry.encoding.decodePath(path2)]),
    properties: {
      color: 'green'
    }
  })
  map.data.add({
    geometry: new google.maps.Data.Polygon([google.maps.geometry.encoding.decodePath(path3)]),
    properties: {
      color: 'orange'
    }
  });
  // Color each letter gray. Change the color when the isColorful property
  // is set to true.
  map.data.setStyle(function(feature) {
    var color = feature.getProperty('color');
    return /** @type {!google.maps.Data.StyleOptions} */ ({
      fillColor: color,
      strokeColor: color,
      strokeWeight: 2
    });
  });
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>