javascript - 谷歌映射 JavaScript data_layer 多种样式

Question

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

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 个多边形的样式。但是如何为每个多边形设置不同的样式呢？

标签： javascriptgoogle-mapsgoogle-maps-api-3

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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>