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

Question

我正在使用 OverlappingMarkerSpiderfier（不确定这是否相关）在地图上放置 300 多个标记，因此相同位置的标记会聚集在一起。目前代码工作正常，除了标记都同时显示在下面代码中的“for（var key in addresses['ASRAddr']）”循环的末尾。

我想要绘制地图，然后开始看到标记“下雨”到它们的位置。使用 DROP 属性可以完成“下雨”部分，但我不知道如何在每个标记添加到地图时绘制它。

这是从 stackoverflow 中的 sn-ps 拼凑而成的代码（感谢所有做出贡献的优秀人员。不知道如果没有 S/O 我会做什么）：

<script>
  function decodeAddr(callback, map) {
    var jsonData = jQuery.ajax({
      url: "static/data.json",
      dataType: "json",
      async: false
      }).responseText;

    var addresses = JSON.parse(jsonData);

    callback(addresses, map);
  };

  function getHC(key) {
     var hc = jQuery.ajax({
        async: false,
        dataType: "text",
        cache: false,
        url: "/static/periodicHC/" + key.substring(0,11)
     }).responseText;
     return(hc);
  };

  function initMap(addresses, map) {
     var zColors = {"green" : 1, "yellow" : 2, "red" : 3};
     var iw = new InfoBubble();

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

     for (var key in addresses['ASRAddr']) {
      var state = addresses['ASRAddr'][key]['state']
      var position = new google.maps.LatLng(addresses['ASRAddr'][key]['latitude'], addresses['ASRAddr'][key]['longitude']);

      marker = new google.maps.Marker({
        position: position,
        map: map,
        title: key + '\n' + addresses['ASRAddr'][key]['phyAddr'] + '\n\n' + getHC(key),
        zIndex: zColors[state],
        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
     }
  }

  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);
     });
  }
</script>

功能如下：

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

剩下的就是添加标记/InfoBubbles 到地图的常用代码 sn-ps。

Answer 1

这是我在查看 geocodezip 和 Titus 的 cmets 后拼凑起来的工作代码。我有 2 个问题：1）我没有在 setTimeout 中使用乘数（在我的情况下为 50 毫秒），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);
     });
  }