使用传单更改鼠标经过时的图标

Question

希望你能帮助我。我正在用传单绘制点。我需要，当鼠标经过标记时，标记会更改图标。我设法通过以下方式用数组来做到这一点：

baresPoblenou = [];
  baresPoblenou.push({ lat: 41.40288966232697, lng: 2.198766893752577, bar: 'Xorus', id: 'ChIJ0UGVLDyjpBIRdNcVCTidgPs', img: 'image/xorus.jpg', descp: 'HolaPhasellus finibus interdum aliquam. Nulla dignissim turpis id diam suscipit pellentesque. Pellentesque neque diam, laoreet eu arcu quis, porttitor convallis nisl. Donec sed hendrerit purus, sed euismod sem.<br>  Aenean sagittis dictum nibh, at rutrum lacus semper eget.', face: 'https://www.facebook.com/Xorus/', fono: '603 307 117', address: 'calle granada 90', web: 'xorus.html' });
  baresPoblenou.push({ lat: 41.3983979113559, lng: 2.204631508368948, bar: 'Blue Bar', id: 'ChIJpa-3z2qjpBIRUW4SwqLY7mk', img: 'image/bluebar.jpg', descp: 'Phasellus finibus interdum aliquam. Nulla dignissim turpis id diam suscipit pellentesque. Pellentesque neque diam, laoreet eu arcu quis, porttitor convallis nisl. Donec sed hendrerit purus, sed euismod sem. Aenean sagittis dictum nibh, at rutrum lacus semper eget.', face: 'https://www.facebook.com/bluebar/', fono: '93 280 90 59', address: ' Pallars, 122', web: '' });
  baresPoblenou.push({ lat: 41.39684988162788, lng: 2.192088531196873, bar: 'D9', id: 'ChIJnVDdoRmjpBIR8Ra7Fpj8nxE', img: 'image/d9.jpg', descp: 'Phasellus finibus interdum aliquam. Nulla dignissim turpis id diam suscipit pellentesque. Pellentesque neque diam, laoreet eu arcu quis, porttitor convallis nisl. Donec sed hendrerit purus, sed euismod sem. Aenean sagittis dictum nibh, at rutrum lacus semper eget.', face: 'https://www.facebook.com/LaTavernicola/', fono: '93 667 74 54', address: 'Rambla de Poblenou 44-46', web: '' });


  var iconDefault = L.icon({
    iconUrl: 'image/icoAzul.png'
  })
  var iconDinamic = L.icon({
    iconUrl: 'image/icoPlomo.png'
  })
  var iconDinamic2 = L.icon({
    iconUrl: 'image/icoVioleta.png'
  })

  for (i = 0; i < baresPoblenou.length; i++) {
    marcas = L.marker([baresPoblenou[i].lat, baresPoblenou[i].lng], {
      title: baresPoblenou[i].bar,
      icon: iconDefault,
    });
    marcas.addTo(map);

    marcas.on('mouseover', function () {
      this.setIcon(iconDinamic)
    });
    marcas.on('mouseout', function () {
      this.setIcon(iconDefault)
    });
    marcas.on('mousedown', function () {
      this.setIcon(iconDinamic2)
    });
    marcas.on('mouseup', function () {
      this.setIcon(iconDefault)
    });
  };

但现在我需要使用 GeoJson 而不是数组来完成。这是我的代码：

baresPoblenou = new L.GeoJSON.AJAX('data/farmacias.geojson', {
    maxZoom: 19,
    minZoom: 14,
    onEachFeature: function (feature, layer) {
      popupContent = "<b>" + feature.properties.NOM + "</b><br>" + feature.properties
        .CARRCADAST + " " + feature.properties.DOORNUM + "</b>";
      layer.bindPopup(popupContent);
    },
    pointToLayer: function (feature, latlng) {
      marcas = L.marker(latlng, {
        title: "hola",
        icon: iconDefault
      });
      return marcas
    },
    }).addTo(map)

知道怎么做吗？

Answer 1

只需在返回标记之前放置事件侦听器

pointToLayer: function (feature, latlng) {
  marcas = L.marker(latlng, {
    title: "hola",
    icon: iconDefault
  });


  marcas.on('mouseover', function () {
    this.setIcon(iconDinamic)
  });
  marcas.on('mouseout', function () {
    this.setIcon(iconDefault)
  });
  marcas.on('mousedown', function () {
    this.setIcon(iconDinamic2)
  });
  marcas.on('mouseup', function () {
    this.setIcon(iconDefault)
  });
  return marcas

使用传单更改鼠标经过时的图标

Change the icon when passing with the mouse, using leaflet

javascript

geojson

leaflet