Javascript 如何在将标记添加到地图时绘制标记

我正在使用重叠标记器（不确定是否相关）在地图上放置300多个标记，以便聚集相同的位置标记。目前，代码运行良好，除了在下面代码中的“for（var-key-in-addresses['ASRAddr']）”循环的末尾同时显示所有标记

我想让地图画出来，然后开始看到标记“雨点”落在他们的位置上。使用DROP属性可以完成“raining”部分，但我不知道如何绘制添加到地图中的每个标记

下面是从stackoverflow中的代码片段拼凑而成的代码（感谢所有做出贡献的优秀人士。不知道没有S/O我会做什么）：

函数解码器（回调，映射）{
var jsonData=jQuery.ajax({
url:“static/data.json”，
数据类型：“json”，
异步：false
}).responseText；
var addresses=JSON.parse（jsonData）；
回调（地址、映射）；
};
函数getHC（键）{
var hc=jQuery.ajax({
async:false，
数据类型：“文本”，
cache:false，
url:“/static/periodicc/”+key.substring（0,11）
}).responseText；
回报率（hc）；
};
函数initMap（地址、映射）{
var zColors={“绿色”：1，“黄色”：2，“红色”：3}；
var iw=新的InfoBubble（）；
var oms=新的重叠标记器（映射{
markersWontMove：没错，
马克斯旺泰德：是的，
基本格式事件：true
});
for（var键入地址['ASRAddr']）{
var state=地址['ASRAddr'][键]['state']
var position=new google.maps.LatLng（地址['ASRAddr'][key]['latitude']，地址['ASRAddr'][key]['longitude']）；
marker=新的google.maps.marker({
职位:职位,，
地图：地图，
标题：key+'\n'+地址['ASRAddr'][key]['phyAddr']+'\n\n'+getHC（key），
zIndex:zColors[状态]，
图标：“/static/images/googleMaps/”+state+“\u MarkerA.png”
});
google.maps.event.addListener（标记'spider_-click'，函数（e）{/'spider_-click'，而不是普通的'click'
marker.addListener（'mouseover'，（）=>iw.open（map，marker））；
marker.addListener（'mouseout'，（）=>iw.close（））；
});
oms.addMarker（marker）；//将标记添加到蜘蛛侠和地图中
}
}
函数initPage（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：5，
中心：新google.maps.LatLng（38.0000，-97.0000）
});
google.maps.event.addListenerOnce（map'idle'，function（）{
解码器（initMap，map）；
});
}

功能如下：

decodeAddr：读取包含所有节点的站点地址的JSON getHC：读取包含节点运行状况的文本文件

---

其余部分是用于向地图添加标记/信息气泡的常见代码片段。

以下是我在查看geocodezip和Titus的评论后拼凑的工作代码。我有两个问题：1）我没有在setTimeout中使用乘法器（在我的例子中是50ms），2）必须为setTimeout创建一个单独的函数，以便我可以从for循环传递idx：

  function setupMarker(idx, addresses, map, oms) {
    setTimeout(function() {
      var key = Object.keys(addresses['ASRAddr'])[idx];
      var state = addresses['ASRAddr'][key]['state']
      var position = new google.maps.LatLng(addresses['ASRAddr'][key]['latitude'], addresses['ASRAddr'][key]['longitude']);
      var zColors = {"green" : 1, "yellow" : 2, "red" : 3};
      var iw = new InfoBubble();

      marker = new google.maps.Marker({
        position: position,
        map: map,
        title: key + '\n' + addresses['ASRAddr'][key]['phyAddr'] + '\n\n' + getHC(key),
        zIndex: zColors[state],
        animation: google.maps.Animation.DROP,
        icon: "/static/images/googleMaps/" + state + "_MarkerA.png"
      });

      google.maps.event.addListener(marker, 'spider_click', function(e) {  // 'spider_click', not plain 'click'
        marker.addListener('mouseover', () => iw.open(map, marker));
        marker.addListener('mouseout', () => iw.close());
      });

      oms.addMarker(marker);  // adds the marker to the spiderfier _and_ the map
    }, 50*idx);
  }

  function initMap(addresses, map) {
     var oms = new OverlappingMarkerSpiderfier(map, {
       markersWontMove: true,
       markersWontHide: true,
       basicFormatEvents: true
     });

     for (i = 0; i < Object.keys(addresses['ASRAddr']).length; i++) {
      setupMarker(i, addresses, map, oms);
     }
  }

  function initPage() {
     var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 5,
       center: new google.maps.LatLng(38.0000, -97.0000)
     });

     google.maps.event.addListenerOnce(map, 'idle', function(){
       decodeAddr(initMap, map);
     });
  }

功能设置标记（idx、地址、地图、oms）{
setTimeout（函数（）{
var key=Object.key（地址['ASRAddr']）[idx]；
var state=地址['ASRAddr'][键]['state']
var position=new google.maps.LatLng（地址['ASRAddr'][key]['latitude']，地址['ASRAddr'][key]['longitude']）；
var zColors={“绿色”：1，“黄色”：2，“红色”：3}；
var iw=新的InfoBubble（）；
marker=新的google.maps.marker({
职位:职位,，
地图：地图，
标题：key+'\n'+地址['ASRAddr'][key]['phyAddr']+'\n\n'+getHC（key），
zIndex:zColors[状态]，
动画：google.maps.animation.DROP，
图标：“/static/images/googleMaps/”+state+“\u MarkerA.png”
});
google.maps.event.addListener（标记'spider_-click'，函数（e）{/'spider_-click'，而不是普通的'click'
marker.addListener（'mouseover'，（）=>iw.open（map，marker））；
marker.addListener（'mouseout'，（）=>iw.close（））；
});
oms.addMarker（marker）；//将标记添加到蜘蛛侠和地图中
}，50*idx）；
}
函数initMap（地址、映射）{
var oms=新的重叠标记器（映射{
markersWontMove：没错，
马克斯旺泰德：是的，
基本格式事件：true
});
对于（i=0；i

您可以检查动画的持续时间，并将每次迭代延迟该时间。相关问题可能重复：

  function setupMarker(idx, addresses, map, oms) {
    setTimeout(function() {
      var key = Object.keys(addresses['ASRAddr'])[idx];
      var state = addresses['ASRAddr'][key]['state']
      var position = new google.maps.LatLng(addresses['ASRAddr'][key]['latitude'], addresses['ASRAddr'][key]['longitude']);
      var zColors = {"green" : 1, "yellow" : 2, "red" : 3};
      var iw = new InfoBubble();

      marker = new google.maps.Marker({
        position: position,
        map: map,
        title: key + '\n' + addresses['ASRAddr'][key]['phyAddr'] + '\n\n' + getHC(key),
        zIndex: zColors[state],
        animation: google.maps.Animation.DROP,
        icon: "/static/images/googleMaps/" + state + "_MarkerA.png"
      });

      google.maps.event.addListener(marker, 'spider_click', function(e) {  // 'spider_click', not plain 'click'
        marker.addListener('mouseover', () => iw.open(map, marker));
        marker.addListener('mouseout', () => iw.close());
      });

      oms.addMarker(marker);  // adds the marker to the spiderfier _and_ the map
    }, 50*idx);
  }

  function initMap(addresses, map) {
     var oms = new OverlappingMarkerSpiderfier(map, {
       markersWontMove: true,
       markersWontHide: true,
       basicFormatEvents: true
     });

     for (i = 0; i < Object.keys(addresses['ASRAddr']).length; i++) {
      setupMarker(i, addresses, map, oms);
     }
  }

  function initPage() {
     var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 5,
       center: new google.maps.LatLng(38.0000, -97.0000)
     });

     google.maps.event.addListenerOnce(map, 'idle', function(){
       decodeAddr(initMap, map);
     });
  }