javascript - 标记动画刷新

Question

我的 Google map 包含多个标记，应根据单击的按钮显示或隐藏这些标记。我需要每个标记都是一个变量实例，所以我将所有实例插入数组，在执行 Google map 函数 setMap(null) 的 for 循环中调用它们。

我的代码可以正常工作，但我已将动画添加到标记中，该动画仅在第一次单击每个按钮时起作用，然后它就不再动画了。

如何让动画在每次点击按钮时重复播放？

jsFiddle here

function init() {
  var mapOptions = {
    center: new google.maps.LatLng(4.7102000, -74.0308118),
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

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


 // Function that places, shows and hide markers
 function markerHelper(lat, lng) {
        var self = this;
        self.place = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            animation: google.maps.Animation.DROP,
            draggable: true
        });

        self.show = function() {
            self.place.setMap(map);
        };

        self.hide = function() {
            self.place.setMap(null);
        };
    }

  // Will store all arrays of markers
  var allMarkers = [];

  // Insert new instances of Markers into allMarkers array
    function pushApply(arr2) {
        allMarkers.push.apply(allMarkers, arr2);
    }


  // @arg is the data-map value
  // arg[index].show() is an instance of markerHelper show function()
  // There is an interval that delays marker placing
  // This function will be executed inside clickBtn function
  function showAll(arg) {
        var index = 0;
        var time = setInterval(function() {
            arg[index].show();

            ++index;
            if (index == arg.length) clearInterval(time);
        }, 100);
    }

  // Run hide to all instances inside allMarkers array
  // markerHelper (Hide = this.place.setMap(null));
  // This function will be executed inside clickBtn function
  function hideAll() {  
        for (var key in allMarkers) {
            allMarkers[key].hide();
        }
    }

  // When <li data-map> is clicked
  // @btn: data-map value
  // @ov: the array that contains the markers I want to show
  function clickBtn(btn, ov) {
        $(document).on('click', '[data-map="' + btn + '"]', function() {
                hideAll();  
                showAll(ov);
          });
  };


  // # Marker Group 4
  // We create the instances of the markers, and store each inside overlay_4 array
    var ov_4_a = new markerHelper(4.710948481769617, -74.0315896406143),
        ov_4_b = new markerHelper(4.709697447502667, -74.03232456588438),
        ov_4_c = new markerHelper(4.710536816896051, -74.03155208968809),
        ov_4_d = new markerHelper(4.710258809311084, -74.03160573386839);
    var overlay_4 = [ov_4_a, ov_4_b, ov_4_c, ov_4_d];
    clickBtn(4, overlay_4); // When <li> has data-map of 4
    pushApply(overlay_4); // stores these arrays into allMarkers array, which is used to macro hide all markers

    // # Marker Group 5 
  // The same explanation for Marker Group 4
    var ov_5_a = new markerHelper(4.710109112873151, -74.03126777553251),
        ov_5_b = new markerHelper(4.70956378986245, -74.03231920146635),
        ov_5_c = new markerHelper(4.709970109009067, -74.03097273254087);
    var overlay_5 = [ov_5_a, ov_5_b, ov_5_c];
    clickBtn(5, overlay_5);
    pushApply(overlay_5);

  // # Marker Group 11
  // The same explanation for Marker Group 4
    var ov_11_a = new markerHelper(4.710258809311084, -74.03104783439329),
    ov_11_b = new markerHelper(4.709980801614976, -74.0310853853195),
    ov_11_b1 = new markerHelper(4.710119805476923, -74.03129459762266),
    ov_11_b2 = new markerHelper(4.709788334683346, -74.03131069087675),
    ov_11_c = new markerHelper(4.710820170666335, -74.03052212142637),
    ov_11_d = new markerHelper(4.7096546770605965, -74.03197051429441),
    ov_11_e = new markerHelper(4.710718591026117, -74.03111757182768),
    ov_11_f = new markerHelper(4.711365492691726, -74.03219581985167),
    ov_11_i = new markerHelper(4.7099754553120405, -74.03072060489347),
    ov_11_k = new markerHelper(4.710258809311084, -74.03105319881132);
  var overlay_11 = [ov_11_a, ov_11_b, ov_11_b1, ov_11_b2, ov_11_c, ov_11_d, ov_11_e, ov_11_f, ov_11_i, ov_11_k];
    clickBtn(11, overlay_11);
  pushApply(overlay_11);


  map.setMap();
}

init();

Answer 1

使用 marker.setAnimation() 将允许您重置它:

self.show = function() {
    self.place.setMap(map);
    self.place.setAnimation(null);
    self.place.setAnimation(google.maps.Animation.DROP);
};

Modified JSFiddle