Как рисовать маркеры по мере их добавления на карту

Я размещаю более 300 маркеров на карте с помощью OverlappingMarkerSpiderfier (не уверен, что это актуально), поэтому маркеры с одинаковым местоположением группируются. В настоящее время код работает нормально, за исключением того, что все маркеры отображаются одновременно в конце цикла «for (ключ var в адресах ['ASRADdr'])» в приведенном ниже коде.

Я бы хотел, чтобы карта рисовалась, а затем начинала видеть маркеры, «падающие дождем» на их позиции. Использование атрибута 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: прочитать текстовый файл, содержащий сведения о работоспособности узлов.

Остальное — это обычные фрагменты кода для добавления маркеров/информационных пузырей на карты.


google-maps javascript google-maps-api-3 marker markerspiderfier
person musca999    schedule 07.01.2018    source источник
comment
Вы можете проверить продолжительность анимации и отложить каждую итерацию на это время.   -  person Titus    schedule 07.01.2018
comment
Возможный дубликат маркеров перетаскивания Google Maps API v3 из XML с задержка?   -  person geocodezip    schedule 07.01.2018
comment
связанный с этим вопрос: функция setTimeout не работает при циклическом прохождении маркеры в Gmaps API   -  person geocodezip    schedule 08.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вот рабочий код, который я собрал после просмотра комментариев geocodezip и Титуса. У меня было 2 проблемы: 1) я не использовал множитель в setTimeout (50 мс в моем случае) и 2) мне пришлось создать отдельную функцию для setTimeout, чтобы я мог передать ей idx из цикла for:

  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);
     });
  }
person musca999    schedule 08.01.2018