Google maps API Animate多边形颜色更改

时间:2016-09-01 12:02:52

标签: javascript css3 google-maps google-maps-api-3

我发现Google的this great sample是关于在鼠标悬停时使多边形变得丰富多彩。

我需要的是在多个国家/地区制作多边形,例如:美国,加拿大和墨西哥,并使它们在悬停时设置颜色更改动画,动画恢复原始颜色,并在点击时点击,返回国家/地区名称并放大该国家/地区。我已经开始了,但马上卡住了。

任何人都可以帮我完成这项任务吗?

1 个答案:

答案 0 :(得分:1)

对于其他有同样问题的人来说,可能有点太晚了:

    (function(){
        var opacityUp =true;
        var animOpacity = 0.1;
        var animStep = 0.005;
        function animatePolygons() {
            if(opacityUp) {
                animOpacity+=animStep;
                if(animOpacity>=0.99) {
                    opacityUp = false;
                }
            } else {
                animOpacity-=animStep;
                if(animOpacity<=0.1) {
                    opacityUp = true;
                }
            }
                polygon.setOptions({
                    fillOpacity: animOpacity
                });
            requestAnimationFrame(animatePolygons);
        };
        animatePolygons();
    })();