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

});

因此，当鼠标移出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
  });

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

1 个答案: