Question

At first I created a for loop that created my markers (from data stored in an array), because a delay is not possible I made a setTimout(function().

This looping function loops until var counter reaches var maxLoops. The problem is that I can't find a way to reach these created markers from outside this recreated loop.

I would like to retrieve the content of "customProperty" of the specific marker that is clicked.

google.maps.event.addListenerOnce(map, 'idle', function() {
  (function next() {
    if (counter === maxLoops) {
      markersGeladen = 1;
    };
    if (counter++ >= maxLoops) {
      return;
    }
    setTimeout(function() {

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[counter - 1][1], locations[counter - 1][2]),
        map: map,
        title: locations[counter - 1][0],
        icon: icon,
        customProperty: dataLikeText //<-- as mentioned before
      });

      markerArray.push(marker);

      if (!audio.ended && counter > 2) {
        audio2.play();
      }
      if (!audio.ended && !audio2.ended && counter > 2) {
        audio3.play();
      } else {
        audio.play();
      }

      speed = speed * 0.89;
      next();
    }, speed);
  })();
});

var markerArray = [];
var marker;
var map;
var markersGeladen = 0;
var locations = [
  ['FabLab Maastricht', 50.851368, 5.690973], //more items are placed
  ['Enschede', 52.22627199999999, 6.922312099999999]
];

var zoom;
if (window.innerHeight < 750) {
  zoom = 7;
} else {
  zoom = 8;
} //adjusts zoom of g-maps

var style = []; //style here

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 52.113252,
      lng: 5.542603
    },
    zoom: zoom,
    disableDefaultUI: true,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    styles: style
  });

  var maxLoops = 26;
  var counter = 0;
  var speed = 800;
  var icon = {
    url: "img/marker.png",
    scaledSize: new google.maps.Size(75, 75)
  };
  var audio = new Audio('audio/plop.mp3');
  var audio2 = new Audio('audio/plop.mp3');
  var audio3 = new Audio('audio/plop.mp3');

  google.maps.event.addListenerOnce(map, 'idle', function() {
    (function next() {
      if (counter === maxLoops) {
        markersGeladen = 1;
      };
      if (counter++ >= maxLoops) {
        return;
      }
      setTimeout(function() {

        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[counter - 1][1], locations[counter - 1][2]),
          map: map,
          title: locations[counter - 1][0],
          icon: icon,
          customProperty: dataLikeText //<-- as mentioned before
        });

        markerArray.push(marker);

        if (!audio.ended && counter > 2) {
          audio2.play();
        }
        if (!audio.ended && !audio2.ended && counter > 2) {
          audio3.play();
        } else {
          audio.play();
        }

        speed = speed * 0.89;
        next();
      }, speed);
    })();
  });
}

The product end result requires the timeout to create the animation, I cannot go back to a for loop for that reason

Answer 1

相关问题：How to get the fired marker using event.addListener with Google Map API v3

点击监听器功能内部的这个是对标记

的引用

像这样访问customProperty：

this.customProperty

How can I retrieve Gmaps properties earlier created in timeOut loop?

1 个答案: