有没有办法淡出 V3 google.maps.Polygon？答案

【问题标题】：Is there a way to fade out a V3 google.maps.Polygon?有没有办法淡出 V3 google.maps.Polygon？
【发布时间】：2012-03-21 10:12:12
【问题描述】：

有没有办法淡出 V3 google.maps.Polygon？

我想将其淡出，而不仅仅是隐藏/删除标准的 Google Maps V3 多边形。

这可能吗？有插件吗？

【问题讨论】：

标签： google-maps-api-3 fadeout polygons

【解决方案1】：

使用 Javascript setInterval()/clearInterval() 逐步更改多边形的不透明度。像这样的：

var opacity = [1, 0.8]
var polygon = new google.maps.Polygon({
        strokeColor: "#000099",
        strokeOpacity: opacity[0],
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: opacity[1],
        paths: [ /* your points here */ ]
});

var interval = setInterval(function() {
  if (opacity[0] <= 0.0 && opacity[1] <= 0.0) {
    clearInterval(interval);
    polygon.setVisible(false);
  } else {
    opacity[0] = Math.max(0.0, opacity[0] - 0.1);
    opacity[1] = Math.max(0.0, opacity[1] - 0.1);
    polygon.setOptions({strokeOpacity: opacity[0], fillOpacity: opacity[1]});    
  }
}, 50);

【讨论】：

此解决方案不解决描边和填充的统一淡出问题。在中风之前很久，我的填充物就会消失。我投了赞成票，因为它非常接近我的第一个解决方案。

【解决方案2】：

以下是我创建的解决方案，用于解决笔划和填充的统一淡出问题，我通过使其成为一个函数使其易于重复使用。

秒是淡出发生和回调所花费的时间，因此您可以在完成后执行另一个操作。

在我的项目中，我的回调函数从地图中移除多边形并删除变量。

function polygon_fadeout(polygon, seconds, callback){
    var
    fill = (polygon.fillOpacity*50)/(seconds*999),
    stroke = (polygon.strokeOpacity*50)/(seconds*999),
    fadeout = setInterval(function(){
        if(polygon.strokeOpacity + polygon.fillOpacity <= 0.0){
            clearInterval(fadeout);
            polygon.setVisible(false);
            if(typeof(callback) == 'function')
                callback();
            return;
        }
        polygon.setOptions({
            'fillOpacity': Math.max(0, polygon.fillOpacity-fill),
            'strokeOpacity': Math.max(0, polygon.strokeOpacity-stroke)
        });
    }, 50);
}

【讨论】：