【问题标题】:Google maps API Animate polygon color change谷歌地图 API 动画多边形颜色变化
【发布时间】:2016-09-01 12:02:52
【问题描述】:

我从 Google 找到了 this great sample,关于让多边形在鼠标悬停时变得多彩。

我需要在多个国家/地区制作一个多边形,例如:美国、加拿大和墨西哥,并让它们在悬停时动画颜色变化,在离开时动画恢复原始颜色,点击时,返回国家名称并放大到国家。我已经开始了,但马上就卡住了。

谁能帮我完成这项任务?

【问题讨论】:

  • 那么,您只需要动画部分的帮助吗?因为这似乎是一个与 CSS 相关的简单事情。
  • 还有一个国家的多边形...
  • 到目前为止你做了什么?
  • 我马上就卡住了……
  • 细节,你尝试了什么?你是怎么卡住的?向我们展示您的代码。

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


【解决方案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();
    })();

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-02-03
    • 2011-07-15
    • 2013-04-15
    • 2014-12-20
    • 2012-07-01
    • 1970-01-01
    • 2011-09-13
    相关资源
    最近更新 更多