Question

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

我想要的是绘制地图，然后开始看到标记“下雨”到他们的位置。使用DROP属性执行“下雨”部分，但我无法弄清楚如何在添加到地图时绘制每个标记。

这里的代码几乎从stackoverflow中的片段拼凑而成（对所有贡献的优秀人员都有信用。不知道没有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的常用代码段。

Answer 1

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">City</td>
        <td class="red">xyz</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Country</td>
        <td class="red">abc</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Date</td>
        <td class="red">05.10.2017</td>
    </tr>
</table>

<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">Category</td>
        <td class="red">This is category</td>
    </tr>
</table>

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

1 个答案: