动画热图层

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)
});

动画热图层

Animating heat map layer

javascript

google-maps

heatmap