Анимационный слой тепловой карты

Question

Мне нужно обновить карту тепла позже. У меня есть этот код до сих пор:

HTML

<div id="filteredMap" style="margin-top:15px;" class="col-md-8 col-md-offset-0 col-sm-5 col-sm-offset-3 col-xs-10 col-xs-offset-2 form-group center-block"> 
    <span class="label label-warning">Google map can not be loaded, or you have not filtered the full map.</span> 
</div> 

JavaScript

$(document).ready(function() { 
var heatMapDataFiltered = []; 
var heatmapFiltered; 
var mapFiltered; 
var mapOptionsFiltered; 

function initialize() { 
    mapOptionsFiltered = { 
     center: { lat: @ViewBag.lat, lng: @ViewBag.lng }, 
     zoom: 15, 
     maxZoom: 18, 
     minZoom:14 
    }; 

    mapFiltered = new google.maps.Map(document.getElementById('filteredMap'), 
    mapOptionsFiltered); 

    heatmapFiltered = new google.maps.visualization.HeatmapLayer({ 
     data: heatMapDataFiltered 
    }); 

    heatmapFiltered.setMap(mapFiltered); 
    heatmapFiltered.set('gradient', heatmapFiltered.get('gradient') ? null : gradient); 
} 

$('#btnShowPulse').click(function(){ 
    heatmapFiltered.setMap(null); 
    heatMapDataFiltered = []; 
    var noDate = "no"; 

    if($('#NoDate').is(':checked')){ 
     noDate = "yes"; 
    } 

    var venueCategoryName = $('#venueCategoryName').val(); 
    var venueStartingDate = $('#venueStartingDate').val(); 
    var venueEndingDate = $('#venueEndingDate').val(); 
    var URL = "/Map/FilterJSON?venueCategoryName=" + venueCategoryName + "&venueStartingDate=" + venueStartingDate + "&venueEndingDate=" + venueEndingDate + "&NoDate=" + noDate; 

    $.ajax({ 
     type: 'get', 
     dataType: 'json', 
     cache: false, 
     url: URL, 
     success: function (data) { 
      $.each(data, function (index, data) { 
       heatMapDataFiltered.push({ 
        location: new google.maps.LatLng(data.lat, data.lng), 
        weight: data.weight 
       }); 

       heatmapFiltered = new google.maps.visualization.HeatmapLayer({ 
        data: heatMapDataFiltered 
       }); 

       heatmapFiltered.setMap(mapFiltered); 
       heatmapFiltered.set('gradient', heatmapFiltered.get('gradient') ? null : gradient); 

       setTimeout(2000); 
      }); 
     }, 
     error: function (request, status, error) { 
      alert(request.responseText); 
     } 
    });   
}); 

google.maps.event.addDomListener(window, 'load', initialize); 
}); 

Проблема заключается в том, этот код работает успешно, но я не буду видеть на карте точка за точкой. Он будет отображать все точки вместе, а не один за другим. Я не знаю, почему setTimeout не будет работать должным образом?

Answer 1

setTimeout(2000) ничего не сделает.

setTimeout(callback, 2000) будет ждать две секунды, затем выполнить функцию callback.

вот версия с анонимной функции:

$.each(data, function (index, data) { 
    setTimeout(function() { 
     heatMapDataFiltered.push({ 
      location: new google.maps.LatLng(data.lat, data.lng), 
      weight: data.weight 
     }); 

     heatmapFiltered = new google.maps.visualization.HeatmapLayer({ 
      data: heatMapDataFiltered 
     }); 

     heatmapFiltered.setMap(mapFiltered); 
     heatmapFiltered.set('gradient', heatmapFiltered.get('gradient') ? null : gradient); 

    }, 2000 * index) 
});