Изменение размера маркеров при наведении листовки

У меня есть некоторые маркеры, которые я загружаю из базы данных, но проблема в том, что при наведении курсора на маркер я должен изменить значок, Я могу успешно сделать это, но если я наведу курсор на другой маркер, первый нажатый маркер будет иметь значок изменен, и на том, что я завис остался прежним.

Есть идеи, что я могу сделать?

function addScoala1() {
  var scoala = JSON.parse('<?php echo json_encode($scoala) ?>');
  for (var i = 0; i < scoala.length; i++) {
    var greenIcon = new L.Icon({
      iconUrl: 'https://static1.squarespace.com/static/540ed918e4b0daae9995d1d7/54ecab60e4b0feaa477dac5a/54ecab79e4b0c686e92227d7/1424796549381/university.png',
      shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
      iconSize: [35, 40],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      shadowSize: [10, 10]
    });
    var marker = L.marker([scoala[i]['latitudine'], scoala[i]['longitudine']], {
      icon: greenIcon
    }).addTo(groupA);
    marker.bindPopup("<b>" + scoala[i]['scoala'] + "</b><br>Detalii:" + scoala[i]['detalii'] + "<br />Telefon: " + scoala[i]['telefon']);
    L.Icon.Big = L.Icon.extend({
      options: {
        iconSize: new L.Point(44, 61),
        iconUrl: 'https://static1.squarespace.com/static/540ed918e4b0daae9995d1d7/54ecab60e4b0feaa477dac5a/54ecab79e4b0c686e92227d7/1424796549381/university.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png'
      }
    });

    var bigIcon = new L.Icon.Big();
    marker.on('mouseover', function(e) {
      this.openPopup();
      marker.setIcon(bigIcon);
    });
    marker.on('mouseout', function(e) {
      this.closePopup();
      marker.setIcon(greenIcon);
    });
  }
}

Введите описание изображения здесь

1 2
javascript jquery google-maps leaflet

1 ответ:

Проблема здесь связана с областью действия и асинхронными событиями.

marker.on('mouseover', function(e) {
  this.openPopup();
  marker.setIcon(bigIcon);//marker object is overwritten in the for loop each time
});

Вы можете использовать вместо 

e.target.setIcon(bigIcon);

То же самое для mouseout

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

function(marker){
    marker.on('mouseover', function(e) {
      this.openPopup();
      marker.setIcon(bigIcon);
    });
}(marker)
3