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

使用传单通过鼠标传递时更改图标

1 个答案: