地图加载时谷歌标记的动画超时

Question

我想为每个 google 标记的 DROP 动画创建一个超时，但我认为标记和数组项的关闭代码是冲突的。我对闭包不太了解，并且有点卡在这个问题上。

我可以让它们一次全部掉落。

falling markers code jsfiddle

但我希望在每个标记为 100 毫秒后有一个超时。

这是我认为可行的

...

//Loop through nc array
for (var i = 0; i < nc.length; i++) {

   //Create 100 ms rule on marker creation
   setTimeout(function () {

     //Create marker
     var marker = new google.maps.Marker({
       position: nc[i],
       map: map,
       title: "tron" + i,
       animation: google.maps.Animation.DROP,
     });

    }, i * 100);

   //Creating the closure
   (function (i, marker) {

     //Add infowindow
     google.maps.event.addListener(marker, 'click', function () {
         if (!infowindow) {
            infowindow = new google.maps.InfoWindow();
         }
         //Setting content of info window
         infowindow.setContent('<h2>Tron lives | ' + i + '</h2>');
             infowindow.open(map, marker);
         });
      })(i, marker);
    };

...

但这不起作用。我认为一旦在循环中创建标记，就会在创建过程中设置超时，这将创建下雨标记效果。

Answer 1

和@Bryan Weaver 有同样的想法。拿起你的小提琴并对其进行了一些修改以在函数中创建标记，并迭代地设置超时。以下面的内容结束，它成功地完成了你的“雨”效果。

    var addmarker = function(i) {
        //Create marker
            var marker = new google.maps.Marker({
                position: nc[i],
                map: map,
                title: "tron" + i,
                animation: google.maps.Animation.DROP,
            });

            //Creating the closure
            (function (i, marker) {   

                //Add infowindow
                google.maps.event.addListener(marker, 'click', function () {
                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }
                    //Setting content of info window
                    infowindow.setContent('<h2>Tron lives | ' + i + '</h2>');

                    infowindow.open(map, marker);
                });
            })(i, marker); 
        if(i++ < nc.length) {
            setTimeout(function() {addmarker(i)}, 100);
        }

    }
    addmarker(0);             

这是完整的小提琴：http://jsfiddle.net/LzJ8B/

Answer 2

试试这个：

var map;
var service;
var infowindow;
var mapcenter;
var markers = [];

  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }
  /*init map*/
  function initMap(){
     mapcenter= new google.maps.LatLng(-33.8617374,151.2021291);
     map = new google.maps.Map(document.getElementById('map'), {
     center: mapcenter,
     zoom: 10
   });

    infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(map);
  };
  /*end init map*/

  function findPlaces(){
    service.nearbySearch({
      location: mapcenter,
      radius: 50000,
      type:['animal hospital'],
      keyword: ['pet animal emergency clinic hospital']
    }, nearbyCallback);
  }

  function nearbyCallback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      setMapOnAll(null); //clear markers

      for (var i = 0; i < results.length; i++) {
      /*important part of the code*/
          (function(results,i){
            if(results)
            setTimeout(function(){createMarker(results[i])},123*i);
          })(results,i)
      }
    }
  };

  function createMarker(place) {
    var placeLoc = place.geometry.location;
      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        animation:google.maps.Animation.DROP,
      });
        markers.push(marker);
        google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent('<div><h4 style="margin:0;padding:0">'+place.name+'</h4><p style="margin:0;padding:0;font-size:12px">'+place.vicinity+'</p></div>');
        infowindow.open(map, this);
      });
  };

//call findplaces document.ready event
$(function(){
    $('button').click(function(){findPlaces();});
   });
 });

在您的 HTML 中

<div id="map"  class="col12" style="width:100%;height:100%"></div>
<button>Load Places</button>
<script src="https://maps.googleapis.com/maps/api/js?key=--your-api-key--=places&callback=initMap" async defer></script>