javascript - 修改悬停 Leaflet 上的标记大小

Question

我有一些标记是从数据库加载的，但问题是当我将鼠标悬停在标记上时我应该更改图标，我可以成功地做到这一点，但是如果我将鼠标悬停在另一个标记上，第一个点击的标记是更改图标后，我悬停的图标保持不变。

有什么想法吗？

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);
    });
  }
}

Answer 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 也是一样的

否则你可以用 immediatly invoked function 做一些包装保留范围，因此:

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