Question

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

我尝试了以下（在'zoom_changed'上）...

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

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

任何人都知道如何实现这个目标？

由于

更新

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

Answer 1

当你只设置例如fillOpacity将丢弃所有其他样式，并使用API默认值。

可能的解决方案：在默认样式函数中实现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

没有＆＃34;不透明度＆＃34;样式。它需要是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：笔画宽度，以像素为单位。

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

2 个答案: