在鼠标悬停时突出显示L.divIcon或在Leaflet地图中以编程方式突出显示

Posted 2021-04-13

我想在鼠标悬停时突出显示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!')
});

答案

首先，要修复标记问题，请替换此代码

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();
    });

});

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

然后，个性化按钮单击的一种方法是：

在创建按钮时向按钮添加一个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
  });