如何在谷歌地图上一一加载标记动画

Question

我有一些带有ajax的代码，用于地图上的谷歌标记。它的工作正常。现在我想要一个一个地放置标记而不是一次加载所有。请帮助我$.ajax({            type: 'get',            url: APP_URL + '/yestoday',            data: {_token:"{{csrf_token()}}"},            success: function (data) {              debugger;               // console.log(data);                var locations  = Array();                var map = new google.maps.Map(document.getElementById('map'), {                center: new google.maps.LatLng(20.593683,78.962883),                zoom: 7,                });                jQuery.each(data , function (index, value){                var points = Array();                var point = new google.maps.LatLng(parseFloat(value.latitude),parseFloat(value.longitude));                points.push(parseFloat(value.latitude));                points.push(parseFloat(value.longitude));                points.push(value.store_name);                points.push(value.store_address);                  locations.push(points);                var marker = new google.maps.Marker({                    position: point,                    map: map,                    animation: google.maps.Animation.DROP,                });                var infowindow = new google.maps.InfoWindow();                google.maps.event.addListener(marker, 'mouseover', function() {                  infowindow.setContent('<div><strong>'+points[2]+'</strong><br><strong>'+points[3]+'</strong></div>');                  infowindow.open(map, this);                });                google.maps.event.addListener(marker, 'mouseout', function() {                  infowindow.close();                });            });        },    });

Answer 1

你可以通过使用setTimeout函数来实现

set delayMarker = 200; // 你可以在这里设置你的延迟时间

$.ajax({

    type: 'get',

    url: APP_URL + '/yestoday',

    data: {_token:"{{csrf_token()}}"},

    success: function (data) {

        var locations  = Array();

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

            center: new google.maps.LatLng(20.593683,78.962883),

            zoom: 7,

        });

        var delayMarker = 200;

        jQuery.each(data , function (index, value){

            setTimeout(function() {

                var points = Array();

                var point = new google.maps.LatLng(parseFloat(value.latitude),parseFloat(value.longitude));

                points.push(parseFloat(value.latitude));

                points.push(parseFloat(value.longitude));

                points.push(value.store_name);

                points.push(value.store_address);

                locations.push(points);

                var marker = new google.maps.Marker({

                    position: point,

                    map: map,

                    animation: google.maps.Animation.DROP,

                });

                var infowindow = new google.maps.InfoWindow();

                google.maps.event.addListener(marker, 'mouseover', function() {

                    infowindow.setContent('<div><strong>'+points[2]+'</strong><br><strong>'+points[3]+'</strong></div>');

                    infowindow.open(map, this);

                });

                google.maps.event.addListener(marker, 'mouseout', function() {

                    infowindow.close();

                });

            },index * delayMarker);

        });

    },

});