Question

我在Leaflet中使用带有自定义图像的标记，如下所示：

// A template for icons when they get instantiated on the map
var UnitIcon = L.Icon.extend({
options: {
    iconSize:     [40, 40],
    iconAnchor:   [20, 35]
  }
});

function PlaceIconOnMapAtLatLng(iconURL, lat, lng)
{
  var newIcon = new UnitIcon({iconUrl: iconURL});
  var myMarker = L.marker([lat, lng], {icon: newIcon, draggable: true}).addTo(map);
}

自定义图像位于文件夹中，并在运行时读取。这样的想法是用户可以更改这些内容，并拥有所需的数量。

我的问题是，要突出显示这些内容，例如单击时，Leaflet中似乎没有任何直接的方法可以做到这一点。最初，我只考虑在图标周围绘制形状，但后来将其视为自己单独的东西，将其单独拖动，而我希望它始终与关联的图标保持在一起。

一次可怕的尝试就像是不断运行更新，将突出显示的位置设置为所选标记的位置一样。

或者是否有某种关联对象的方法，例如作为“孩子”，以便当其父对象移动时，孩子也随之移动？

我希望显示一个突出显示的内容，而不是执行诸如更改所选标记的大小或不透明度或使其弹出的操作，尽管这些可能是后备选项。我想要高亮显示的原因是，最终我希望能够一次高亮显示多个图标，并且有大量弹出窗口等，似乎并不是一种很好的方法。

Answer 1

您可以向图标添加CSS类。

marker.on('click', function (e){
   var layer = e.target;
   if(!L.DomUtil.hasClass(layer._icon, 'dash-border')){
        L.DomUtil.addClass(layer._icon,'dash-border');
   }else{
        L.DomUtil.removeClass(layer._icon,'dash-border');
   }
});

.dash-border {
    border: 2px dashed #3388ff;
    background-color: #3388ff4d;
}

https://jsfiddle.net/falkedesign/r9onevq2/

在传单中突出显示自定义图标

1 个答案: