Question

我遇到了一个问题。我有一个使用谷歌地图的简单应用程序。我注意到如果我使用两台显示器并且我在一台显示器上打开浏览器并将其拖到其他显示器上，添加动画后标记会重复。其他人遇到过这个，或者知道如何修复它？问题是我的代码，还是谷歌地图错误？

这不是一个大问题，但它足以让我烦恼。

我创建了一个jsfiddle来重现我的情况。在一台显示器上打开jsfiddle并将其拖到另一台显示器上，然后点击反弹按钮。如果您打开开发人员工具并选择其他设备，也会出现此问题。

HTML：

<div id="map-canvas" style="height:300px;width:600px;background-color:#CCC"></div>
<button id="button">
 BOUNCE
</button>

使用Javascript：

var marker;
var map;
function initialize() {
    var myLatLng = new google.maps.LatLng(45.4375, 12.3358),
        myOptions = {
            zoom: 5,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
      marker = new google.maps.Marker({
      position: myLatLng,
      map: map
    });
    document.getElementById("button").addEventListener("click", bounceMarker);
};

function bounceMarker() {
        if(marker.getAnimation() == null){
      marker.setAnimation(google.maps.Animation.BOUNCE);
      setTimeout(function(){
        marker.setAnimation(null);
      }, 700);
    }
};

initialize();

Answer 1

有点奇怪，但似乎与你的bounceMarker（）函数有关。我把它简化为：

function bounceMarker() {

  marker.setAnimation(google.maps.Animation.BOUNCE);

};

问题消失了 - https://jsfiddle.net/8jmw24ee/

Google地图标记重复

1 个答案: