Javascript 动画未正确附着到标记

jsfiddle：

我试图将maps api封装在一个小模块中，我可以传递一个对象数组，它将用于在地图上绘制标记

除了动画（toggleBounce（））仅附加到地图上绘制的一个标记之外，下面的代码可以正常工作。单击任何标记时，同一标记会反弹。它一定是一个问题，如何点击侦听器被连接，但我不知道我做错了什么

我的模块：

var gmapsModule = (function () {

    //private

    function toggleBounce(marker) {
        console.dir(marker);
        //make markers bounce when selected
        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }

    function drawMarkers( mapOptions, branchMarkers, animation ) {

        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        for (var prop in branchMarkers) {

            if( branchMarkers.hasOwnProperty( prop ) ) {

                var branch = branchMarkers[prop];

                var markerCoordinates = new google.maps.LatLng(branch.lat,branch.lng);

                marker = new google.maps.Marker({
                    animation: google.maps.Animation.DROP,
                    //icon: markerImageOptions,
                    position: markerCoordinates,
                    title: branch.branchname
                });

                //draw marker on map
                marker.setMap(map);

                google.maps.event.addListener(marker, 'click', animation(marker));

            } //end if
        } // end for

    }

    //public
    return {
        drawMarkers: drawMarkers,
        toggleBounce: toggleBounce
    };
})();

使用模块生成地图

var branchObjs = [
    { 
        branchname: 'sssssssssss',
        branchnum: '1',
        lat: '20.804167',
        lng: '-53.169444'
    },
    { 
        branchname: 'oooooooooo',
        branchnum: '2',
        lat: '20.824167',
        lng: '-53.189444'
    }
];

var mapOptions = {
    center: new google.maps.LatLng(20.804167,-53.169444),
    zoom: 9
};

google.maps.event.addDomListener(window, 'load',
    gmapsModule.drawMarkers(mapOptions,branchObjs,gmapsModule.toggleBounce));

---

您需要保留对所有标记的引用，并切换每个标记的动画状态。目前，您只保留对最后一个的引用，因此这是唯一可以更改的引用

var gmapsModule = (function () {

  //private
  markers = [];

  function toggleBounce() {
      //make the clicked marker bounce
      if (this.getAnimation() != null) {
          this.setAnimation(null);
      } else {
          this.setAnimation(google.maps.Animation.BOUNCE);
      }
      }
  }

//----------------------------------------------------

if (branchMarkers.hasOwnProperty(prop)) {

    var branch = branchMarkers[prop];

    var markerCoordinates = new google.maps.LatLng(branch.lat, branch.lng);

    var marker = new google.maps.Marker({
        animation: google.maps.Animation.DROP,
        //icon: markerImageOptions,
        position: markerCoordinates,
        title: branch.branchname
    });
    gmapsModule.markers.push(marker);  // keep reference to marker

//----------------------------------------------------

if (branchMarkers.hasOwnProperty(prop)) {

    var branch = branchMarkers[prop];

    var markerCoordinates = new google.maps.LatLng(branch.lat, branch.lng);

    var marker = new google.maps.Marker({
        animation: google.maps.Animation.DROP,
        //icon: markerImageOptions,
        position: markerCoordinates,
        title: branch.branchname
    });
    gmapsModule.markers.push(marker);  // keep reference to marker

---

未定义branchObjs

。请提供一个演示该问题的示例。

未捕获类型错误：gmapsModule.drawMarkers不是函数

。第二个要求：请提供一个说明问题的例子。哎呀，忘了我改了。刚刚修复了它。我将再次编辑它以删除我的getIcon.php脚本，即使这不是问题的根源。@geocodezip我清理了它，并在尝试JSFIDLE时添加了一个JSFIDLEHMM。当我单击其中一个标记时，所有标记都会反弹。我只是想让标记器点击弹跳。我想我误解了你的问题。更新答案/小提琴，使点击的标记反弹。