javascript - 在鼠标悬停或以编程方式在 Leaflet map 中突出显示 L.divIcon

Question

我想在鼠标悬停时和/或通过“外部操作”(如按下按钮)突出显示 L.divIcon svg 标记。

这是一个简化的测试用例 https://jsfiddle.net/sxvLykkt/5/

标记是动态生成的(最初是 geoJson)并添加到 L.FeatureGroup()。在 mouseover 上，我在临时层上设置了一个更大版本的图标 (divIconActive)，我在 mouseout 时将其删除。不幸的是，这不能像缩进那样工作(它在鼠标悬停时闪烁，我相信该事件正在触发鼠标悬停和鼠标移出)。我该如何解决这个问题。

单击其中一个按钮时如何访问标记？我相信以某种方式超过了他们的指数？!我无法回头。

以下是如何创建标记的部分代码:

// init map and tileLayer -> jsfiddle
var coords = [[53, 13],[49, 10],[46, 12],[51, 16]];

$.each(coords, function(i,e){
  // create the button
  $('#controls').append('<button>'+i+'</button>')

  var marker = L.marker(e, {
    icon: divIcon,
    id: i
  });

  locationLayer.addLayer(marker);

  marker.on('mouseover', function(e){
    markerTemp = L.marker(e.latlng, {
        icon: divIconActive
    }).addTo(map);

  });

  marker.on('mouseout', function(e){
    markerTemp.remove();
  });

});

locationLayer.addTo(map);

$('button').on('click', function(e){
    alert('Highlight the right marker!')
});

Answer 1

首先，要解决标记问题，请替换此代码

marker.on('mouseover', function(e){
    markerTemp = L.marker(e.latlng, {
        icon: divIconActive
    }).addTo(map);

  });

  marker.on('mouseout', function(e){
    markerTemp.remove();
});

为了这个其他

marker.on('mouseover', function(e){

    // place the hover State on a temp Layer
    markerTemp = L.marker(e.latlng, {
        icon: divIconActive
    }).addTo(map);

    markerTemp.on('mouseout', function(e){
      markerTemp.remove();
    });

});

因此，当鼠标移出大标记时，标记将被删除。

然后，个性化按钮点击的一种方法是:

在创建按钮时为其添加一个 ID:

$('#controls').append('<button id="button'+i+'">'+i+'</button>');

稍后，在创建标记后为其按钮添加代码:

var marker = L.marker(e, {
    icon: divIcon,
    id: i
  });

  locationLayer.addLayer(marker);

  //the button for this marker
  $('#button'+i).on('click', function(e){
    alert(i);
    //Here you enter what you want to do
  });