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

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({&nbsp; &nbsp; type: 'get',&nbsp; &nbsp; url: APP_URL + '/yestoday',&nbsp; &nbsp; data: {_token:"{{csrf_token()}}"},&nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; var locations&nbsp; = Array();&nbsp; &nbsp; &nbsp; &nbsp; var map = new google.maps.Map(document.getElementById('map'), {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; center: new google.maps.LatLng(20.593683,78.962883),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; zoom: 7,&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; var delayMarker = 200;&nbsp; &nbsp; &nbsp; &nbsp; jQuery.each(data , function (index, value){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var points = Array();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var point = new google.maps.LatLng(parseFloat(value.latitude),parseFloat(value.longitude));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; points.push(parseFloat(value.latitude));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; points.push(parseFloat(value.longitude));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; points.push(value.store_name);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; points.push(value.store_address);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; locations.push(points);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var marker = new google.maps.Marker({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: point,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; map: map,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animation: google.maps.Animation.DROP,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var infowindow = new google.maps.InfoWindow();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; google.maps.event.addListener(marker, 'mouseover', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; infowindow.setContent('<div><strong>'+points[2]+'</strong><br><strong>'+points[3]+'</strong></div>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; infowindow.open(map, this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; google.maps.event.addListener(marker, 'mouseout', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; infowindow.close();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },index * delayMarker);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },});