正文 

当前位置： 首页 > 知识 >

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

     2023-03-28     201

关键词：

【中文标题】如何在谷歌地图上一一加载标记动画[重复]【英文标题】：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 = [];

【讨论】：

如何在谷歌地图上放置图标标记，图标数量是不是有配额？

】如何在谷歌地图上放置图标标记，图标数量是不是有配额？【英文标题】：HowcanIputiconmarkersonGooglemaps,andisthereaquotaonnumberoficons?如何在谷歌地图上放置图标标记，图标数量是否有配额？【发布时间】：2012-06-2221:02:02【问题描述】... 查看详情

在谷歌地图颤动中设置标记

...在下一步做什么，我尝试了一些示例，但我无法理解知道如何做到这一点，任何人都可以帮助我，我从api获取纬度和经度没有问题，但我不知道如何在谷歌地图中设置标记。变量初始化GoogleMapCont 查看详情

如何在谷歌地图android上设置多个标记？

】如何在谷歌地图android上设置多个标记？【英文标题】：howtosetthemultiplemarkerongooglemapandroid?【发布时间】：2020-04-2214:26:50【问题描述】：我已经完成了具有多个位置的谷歌地图标记，并且我添加了一些带有医院名称、经度和纬度... 查看详情

在谷歌地图v2 android中同时旋转标记组的动画

】在谷歌地图v2android中同时旋转标记组的动画【英文标题】：Animationsforthegroupofmarkerstorotateatthesametimeingooglemapsv2android【发布时间】：2016-09-2912:06:48【问题描述】：我正在googlemapv2中实现汽车组（标记）同时旋转的动画。所以我需... 查看详情

在谷歌地图上加载 100-200K 标记

】在谷歌地图上加载100-200K标记【英文标题】：Loading100-200Kmarkersongooglemap【发布时间】：2015-12-1012:32:33【问题描述】：目前我正在使用GoogleMapsv.3API在地图上绘制标记。我总共有大约500个标记。出于显示目的，我在浏览器的客户端... 查看详情

我想在谷歌地图上显示标记，如附图

】我想在谷歌地图上显示标记，如附图【英文标题】：Iwanttoshowmarkerongooglemapliketheattachedimage【发布时间】：2019-03-0503:15:00【问题描述】：我想在附加的图像中显示我当前的位置标记图标。【问题讨论】：检查这个：***.com/questions/... 查看详情

如何在谷歌地图上放置标记

】如何在谷歌地图上放置标记【英文标题】：Howtoplacemarkersongooglemap【发布时间】：2011-08-1523:54:58【问题描述】：我使用来自primefaces的谷歌地图工具。我希望我的用户能够在地图上只放置一个标记。坐标值应存储在托管bean变量中... 查看详情

如何在谷歌地图中添加两种类型的标记

】如何在谷歌地图中添加两种类型的标记【英文标题】：HowtoaddtwotypesofmarkerinthegoogleMap【发布时间】：2019-08-2003:25:19【问题描述】：我想在谷歌地图中添加两种类型的标记，第一种类型将是可拖动的，另一种类型在谷歌地图中是... 查看详情

在谷歌地图javascript api中 - 如何移动地图而不是标记

】在谷歌地图javascriptapi中-如何移动地图而不是标记【英文标题】：Ingooglemapsjavascriptapi-howtomovemapnotmarker【发布时间】：2022-01-2405:56:38【问题描述】：目前我有一个小项目需要使标记静态并将地图移动到地图上的标记显示-我希望... 查看详情

如何在谷歌地图的折线中点绘制标记？

】如何在谷歌地图的折线中点绘制标记？【英文标题】：HowtoplotthemarkerinthemiddlepointofthepolylineinGoogleMaps?【发布时间】：2017-05-1310:24:49【问题描述】：我在Google地图中绘制了一条折线，当单击折线时，我希望在折线上有一个标记。... 查看详情

如何在谷歌地图中绘制折线在用户位置和标记之间颤动？

】如何在谷歌地图中绘制折线在用户位置和标记之间颤动？【英文标题】：Howtodrawpolylineingooglemapsflutterbetweenuserlocationandamarker?【发布时间】：2022-01-1022:48:36【问题描述】：这是我在这个网站上的第一篇文章，所以我希望能得到我... 查看详情

如何在谷歌地图上添加多个标记

】如何在谷歌地图上添加多个标记【英文标题】：Howtoaddmultiplemarkersonthegooglemap【发布时间】：2021-09-1207:14:33【问题描述】：我正在尝试从从firebase读取的坐标中添加多个标记。它读取所有坐标并存储在列表中。我创建了addMarker函... 查看详情

用户如何在谷歌地图颤振上添加多个标记

】用户如何在谷歌地图颤振上添加多个标记【英文标题】：Howcanuseraddmultiplemarkerongooglemapsflutter【发布时间】：2020-03-1413:43:54【问题描述】：当用户长按地图时，用户如何添加多个标记。在这段代码中，我完成了单张地图。当用... 查看详情

如何在谷歌地图中将文本设置为标记

】如何在谷歌地图中将文本设置为标记【英文标题】：HowtosetatextasMarkerinGoogleMaps【发布时间】：2021-08-2319:36:59【问题描述】：嘿，我正在尝试在地图中显示文本。因此，我使用textpainter来“绘制”给定的字符串并将其添加为标记... 查看详情

如何在谷歌地图的屏幕中心设置标记

】如何在谷歌地图的屏幕中心设置标记【英文标题】：Howtosetmarkeroncenterofthescreeningooglemap【发布时间】：2017-11-2309:58:16【问题描述】：我正在使用javascript制作运输应用，例如uber或lyft。我需要通过屏幕中心获取地图位置，在y=0和x... 查看详情

如何在谷歌地图的标记中添加多个位图图标？

】如何在谷歌地图的标记中添加多个位图图标？【英文标题】：HowtoaddmorethanonebitmapiconinmarkersforGoogleMaps?【发布时间】：2019-05-0523:53:33【问题描述】：IconGeneratoriconFactory=newIconGenerator(this);hM=googleMap.addMarker(newMarkerOptions().position(newLa... 查看详情

如何在谷歌地图中显示集群时隐藏标记

】如何在谷歌地图中显示集群时隐藏标记【英文标题】：HowtohidemarkerwhileshowingclusterinGoogleMap【发布时间】：2017-09-1322:10:30【问题描述】：我将GoogleMap和Google-Maps-iOS-Utils用于应用。如何在只显示集群的同时隐藏标记？https://developers... 查看详情

在谷歌地图v2 android中移动标记

】在谷歌地图v2android中移动标记【英文标题】：Movemarkersingooglemapv2android【发布时间】：2012-11-2313:30:17【问题描述】：我正在AndroidGooglemapsv2中进行地图聚类。我只想将标记从一个地理点动画化到另一个地理点。有没有办法在Google... 查看详情