首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在谷歌地图上一个接一个地加载标记动画

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

Stack Overflow用户
提问于 2019-06-29 12:33:46
回答 2查看 563关注 0票数 0

我有一些ajax代码,用于地图上的google标记。它工作得很好。现在我想一个接一个地放下标记,而不是在time.Please上加载,帮助我

代码语言:javascript
运行
复制
$.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();
                });
            });
        },
    });
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-29 13:18:20

您可以使用setTimeout函数来实现

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

代码语言:javascript
运行
复制
$.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);

        });
    },
});
票数 1
EN

Stack Overflow用户

发布于 2019-06-29 14:55:02

您可以使用setTimeout();

您可以在Google的API文档中找到,这是一个可以做您想做的事情的示例:https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration#try-it-yourself

代码语言:javascript
运行
复制
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 = [];
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56817566

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档