Измените иконку при прохождении мышью, используя буклет - PullRequest
Новая
       12

Измените иконку при прохождении мышью, используя буклет

0 голосов
/ 26 февраля 2019

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

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)

Есть идеи, как это сделать?

1 Ответ

0 голосов
/ 26 февраля 2019

Просто поместите слушателей событий перед возвратом маркера 

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
...