如何在谷歌地图上一一加载标记动画[重复]

Posted 2023-03-28

【中文标题】如何在谷歌地图上一一加载标记动画[重复]

【英文标题】：How to load marker animation one by one on google map [duplicate]

【发布时间】：2019-11-11 00:59:54

【问题描述】：

我有一些带有 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();
                );
            );
        ,
    );

【问题讨论】：

可以设置动画marker.setAnimation(google.maps.Animation.BOUNCE);

【参考方案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);

        );
    ,
);

【讨论】：

谢谢兄弟......它工作得很好......

@Parth 欢迎parth

【参考方案2】：

您可以使用 setTimeout();

您可以在 Google Maps 的 API 文档中找到一个可以满足您的需求的示例： https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration#try-it-yourself

function drop() 
  clearMarkers();
     for (var i = 0; i < neighborhoods.length; i++) 
         addMarkerWithTimeout(neighborhoods[i], i * 200); // Increase this value to slower the animation or decrease it to make it faster
     


function addMarkerWithTimeout(position, timeout) 
  window.setTimeout(function() 
     markers.push(new google.maps.Marker(
         position: position,
         map: map,
         animation: google.maps.Animation.DROP
     ));
         , timeout);


function clearMarkers() 
   for (var i = 0; i < markers.length; i++) 
      markers[i].setMap(null);
   
      markers = [];