谷歌地图API v3:标记并不总是持续反弹

 btsk@163.com 发布于 2023-02-13 14:06

我对谷歌地图标记的反弹动画有一些问题.基本上,我在地图右侧的列中有一个主题列表.在每个主题下面列出了与其连接的标记的名称,以及用于可视地显示/隐藏标记的复选框.我想让相应的标记在将鼠标悬停在其链接的复选框上时连续弹跳,并在用户停止悬停在复选框上时立即停止弹跳.我现在有以下代码:

HTML:

 "

使用Javascript:

function highlightPoint( pointIndex ) {
        window["point" + (pointIndex+1)].setAnimation(google.maps.Animation.BOUNCE);
    }

    function removePointHighlighting( pointIndex ) {
        console.log( "remove animation" );
        window["point" + (pointIndex+1)].setAnimation( null );
    }

除了轻微的打嗝外,此代码几乎按预期工作.有时动画在悬停时连续播放,但有时在离开悬停状态后再次悬停时,弹跳动画只播放一次,然后停止.何时或为何发生这种情况似乎相当随机.动画播放一次后,在页面刷新之前不会再继续播放.我猜这与动画背后的一些计时器有关?我发现以下代码仅用于播放一次反弹动画:

setTimeout(function(){ marker.setAnimation(null); }, 750);

是否有一种方法可以在mouseleave上"重置"这些计时器,或者是否有其他因素导致动画出错?对于我正在制作的应用程序来说,它是一个相对不重要的功能,但我仍然想知道这里的问题是什么.

编辑:这似乎是特定于浏览器的问题.在Safari和Firefox中进行测试时,弹跳没有任何问题.奇怪的指定问题只发生在Chrome中.通常,只要动画设置为null,然后再设置,它就会播放一次.只有在第一次鼠标悬停时才会持续弹跳.奇怪..

1 个回答
  • 而不是将动画设置为null,将其设置为-1.动画常量只是整数.我在我的vuejs应用程序中挣扎了大约一个小时才解决这个问题:/

    2023-02-13 14:09 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有