문제

Is there a way to fade out a V3 google.maps.Polygon?

Instead of just hiding / removing a standard Google Maps V3 polygon I want to fade it out.

Is this possible? Are there any plugins out there?

도움이 되었습니까?

해결책

The following is a solution I created to address the uniform fade out of stroke and fill and I made it easily reusable by making it a function.

seconds is how long it will take the fade out to occur and callback so you could do perform another action once it completes.

In my project my callback function removes the polygon from the map and deletes the variable.

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

다른 팁

Use Javascript setInterval()/clearInterval() to change the opacity of the polygon incrementally. Something like this:

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);
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top