Question

我在google maps javascript中有3个多边形，初始化如下：

state.base

我用以下代码设置样式：

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) ])})

这将设置所有3个Polygon的样式。但是，如何为每个多边形设置不同的样式？

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

proof of concept fiddle

proof of concept with nested polygons

代码段：

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>

Google映射JavaScript data_layer多种样式

1 个答案: