google-maps-api-3 - V3 google.maps.Polygonをフェードアウトする方法はありますか？

Question

V3 google.maps.Polygonをフェードアウトする方法はありますか？

標準のGoogleMapsV3ポリゴンを非表示/削除するのではなく、フェードアウトしたいと思います。

これは可能ですか？そこにプラグインはありますか？

Answer 1

以下は、ストロークと塗りつぶしの均一なフェードアウトに対処するために作成したソリューションであり、関数にすることで簡単に再利用できるようにしました。

秒は、フェードアウトが発生してコールバックするのにかかる時間です。これにより、完了後に別のアクションを実行できます。

私のプロジェクトでは、コールバック関数がマップからポリゴンを削除し、変数を削除します。

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

Answer 2

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