谷歌地图 JavaScript data_layer 多种样式

Question

我在谷歌地图 javascript 中有 3 个多边形，初始化如下：

\n\n

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

\n\n

我用这段代码设置样式：

\n\n

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

\n\n

这设置了所有 3 个 Polygon\xc2\xb4s 的样式。但是如何为每个多边形设置不同的样式呢？

\n

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

概念证明小提琴

嵌套多边形的概念证明

代码片段：

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

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