在悬停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

此处的问题与范围和异步事件有关。

error: variable 'x' is still repeating at this depth

您可以使用

webView.loadUrl("javascript:doSomething()");

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

相同

否则，您可以使用immediatly invoked function进行包装以保留范围，如下所示：

e.target.setIcon(bigIcon);