Подтвердить что ты не робот

Как установить всплывающее окно с маркерами с API Карт Google?

У меня есть этот код, где я показываю и устанавливаю все мои маркеры. Как добавить всплывающее окно с некоторой информацией о маркерах с помощью этого кода? Я добавляю переменную "i" в текст, но она устанавливает во всплывающих окнах все метки "test-723", где 723 является последним значением переменной "i". Что не так?

for (var i = 0; i < arraylng.length-1; i++) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(arraylng[i], arraylat[i])
  });
  var infowindow = new google.maps.InfoWindow({
    content: " "
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent('test: ' + i + '');
    infowindow.open(map, this);
  });
  markers.push(marker);
}

Ответ 1

Сначала измените условие цикла на i < arraylng.length. Сейчас он не захватывает последний элемент вашего массива.

Переменные JavaScript работают с областью функций, поэтому вам нужно вызвать функцию для каждого прослушивателя маркеров, чтобы создать правильные ссылки на переменные. Вы можете использовать анонимную функцию , как показано здесь, или определить функцию для создания прослушивателя кликов:

Несколько информационных окон:

function makeInfoWindowEvent(map, infowindow, marker) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
}

Скорее всего, вы не захотите открывать одновременно больше одного InfoWindow, потому что раздражать нужно нажать на кнопку закрытия x. Затем вам понадобится только один объект InfoWindow и установите контент при нажатии маркера:

Single InfoWindow:

...
  var infowindow = new google.maps.InfoWindow();

  for (var i = 0; i < arraylng.length-1; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(arraylng[i], arraylat[i]),
      map: map
    });

    makeInfoWindowEvent(map, infowindow, "test" + i, marker);

    markers.push(marker);
  }
}

function makeInfoWindowEvent(map, infowindow, contentString, marker) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
}

Ответ 2

var marker = new google.maps.Marker({
              position: myLatLng,
              ....
              content: point[4]
          });
google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(this.content);
            infowindow.open(map, this);
          });

Код внутри цикла. Это отлично сработало для меня.

Ответ 3

Это потому, что переменная i не используется в цикле, но когда маркер щелкнут - а затем я равен последнему индексу + 1... addListener является асинхронным, а не синхронным.

Удалите infowindow.setContent('test: ' + i + ''); и замените content: " " на content: 'test: ' + i. Это должно решить вашу проблему.