在缩放时覆盖 Google 地图数据的不透明度

Question

我在谷歌地图中添加了一些自定义多边形，每个多边形都有基于某个值的自定义颜色。当地图缩小时，我希望颜色是纯色的（我可以正常工作）。我想要发生的是，当用户放大时，多边形变得不透明，让用户看到多边形下方的景观。

我已经尝试了以下（在“zoom_changed”上）...

map.data.setStyle(function (feature) {
              return ({
                  fillOpacity: 0.1
              });
          });

问题在于它还会覆盖多边形的颜色，因此我的多边形将从颜色编码变为全黑，不透明度为 0.5。

有人知道我该如何实现吗？

谢谢

更新

我已经更新了上面的代码以反映下面的建议，但我仍然看到相同的行为。颜色变为灰色，但我确实得到了不透明度，但我丢失了颜色编码的多边形，并且只有所有灰色多边形。

Answer 1

当你只设置例如fillOpacity 将丢弃所有其他样式并使用 API-defaults。

可能的解决方案：在默认样式函数中实现fillOpacity的更改：

  map.data.setStyle(function(feature) {
    return ({
      fillColor: feature.getProperty('color'),
      strokeColor: feature.getProperty('color'),
      //set the opacity to 1 when zoom<4
      //otherwise set it to .1
      fillOpacity: map.getZoom()<4?1:.1
    });
  });

...现在所需的fillOpacity 已应用于初始地图​​缩放

要根据缩放应用不同的fillOpacity，您只需再次运行setStyle（使用相同的样式函数作为参数）。可以通过map.getStyle()

轻松访问样式功能

  google.maps.event.addListener(map,'zoom_changed',function(){
      map.data.setStyle(map.data.getStyle());
  });

...仅此而已。

但这不是最优的，当你有很多特性时，API 必须在每次缩放更改时迭代所有特性，以及当更改的缩放不会导致修改 fillOpacity 时（例如在代码中从 3 放大到 2)。

更好的解决方案：

使用存储上次缩放的属性，然后您可以决定样式功能是否必须运行。

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 4,
    center: {lat: -28, lng: 137.883}
  });
  //that's the mentioned property
  map.set('lastZoom',map.getZoom());

  google.maps.event.addListener(map,'zoom_changed',function(){
    //do we need to update the style?
    if(this.getZoom()<4!==this.get('lastZoom')<4){
      map.data.setStyle(map.data.getStyle());
    }
    //update the property
    this.set('lastZoom',this.getZoom());
  });

演示：http://jsfiddle.net/doktormolle/b7u37wax/

Answer 2

没有“不透明”样式。它需要是 strokeOpacity 或 fillOpacity，具体取决于您是更改线还是多边形。

working fiddle

map.data.setStyle(function (feature) {
    return ({
        fillOpacity: 0.1
    });
});

请参阅style options 上的文档

提供在线几何形状

• strokeColor：描边颜色。支持所有 CSS3 颜色，扩展的命名颜色除外。
• strokeOpacity：描边不透明度介于 0.0 和 1.0 之间。
• strokeWeight：笔触宽度，以像素为单位。

适用于多边形几何体

• fillColor：填充颜色。支持所有 CSS3 颜色，扩展的命名颜色除外。
• fillOpacity：0.0 到 1.0 之间的填充不透明度。
• strokeColor：描边颜色。支持所有 CSS3 颜色，扩展的命名颜色除外。
• strokeOpacity：描边不透明度在 0.0 和 1.0 之间。 strokeWeight：笔触宽度（以像素为单位）。