从图层获取leaflet标记

Question

我是新手使用leaflet，正在尝试实现一组具有不同CSS样式的标记。

所以，我知道在将标记添加到地图后，可以通过调用marker上的getElement()来访问不同的CSS属性，例如：

    marker.addTo(map);
    marker.getElement().style.borderColor = '#000';

这段代码本来可以正常工作，但是当向一个图层添加标记时，会出现TypeError错误（getElement()未定义）。以下是出现错误的示例代码：

    myLayer.addLayer(marker);
    marker.getElement().style.borderColor = '#000';

我是否忽略了一种更简单的设置图层中标记和divicon的CSS属性的方法，或者是否有一种类似的方法可以在JavaScript中访问添加到图层中的标记和divicon？

- DemandingBoyfriend

Answer 1

我找到了一个对我有用的解决方案。 思路是扩展用于创建图标的函数。 这里的最后一个答案 github.com/Leaflet/Leaflet/issues/5231 帮了很大的忙。

    var borderSize = ...;
    L.DivIcon.Custom = L.DivIcon.extend({
        createIcon: function(oldIcon) {
               var icon = L.DivIcon.prototype.createIcon.call(this, oldIcon);
               icon.style.borderSize = borderSize;
               ...
               return icon;
        }
    })
    var icon = new L.DivIcon.Custom({
        ...
    });        
    var ll = L.latLng(entry.Longitude, entry.Latitude);
    var marker = L.marker(ll, {
      icon: icon
    })
    this.myLayer.addLayer(marker);

- DemandingBoyfriend

Answer 2

欢迎来到SO！

如果没有添加到地图上（因为您的父级myLayer可能没有被添加到地图本身），标记就没有任何元素。

如果您不需要单独和动态地更改太多样式，您可以使用您的Icon / DivIcon的{{link1：className}}选项。

- ghybs

---

首先，感谢您的回答和热烈欢迎！我已经在使用静态CSS属性的className选项。 如果我理解正确，我会给标记分配一个唯一的className，然后使用getElementsByClassName()获取标记？ 我尝试了className: 'icon ' + name + entry.id,，然后通过var my_icon = document.getElementsByClassName(name + entry.id)[0]; my_icon.style.borderWidth = Math.trunc(borderSize) + 'px';来获取图标。 但是这似乎也不起作用，因为奇怪的是没有找到任何元素。 - DemandingBoyfriend

让我换个说法：如果标记不在地图上，它就不在DOM中，因此 document.getElementsByClassName 等函数将无法找到它。相反，要访问标记及其图标，并更改其className。你可以尝试更改单独的样式，但那会更加复杂。 - ghybs

啊，是的，这样说得通，我无法访问它。不过，我需要为每个divicon单独设置borderSize，这就是你提到的第二种情况，对吗？ 根据这里提到的内容，我可能可以通过扩展divicon构造函数来实现：https://github.com/Leaflet/Leaflet/issues/5231 （最后一条评论）。但是我不太确定在我的情况下是否会起作用，因为我还需要传递额外的数据给构造函数。 - DemandingBoyfriend

然后去尝试一下，这是找到解决方案的最佳方式，而不是无限地谈论它。但我仍然相信，一个预定义的类集合，每个类都包含您所需的CSS规则，已经足够好了。 - ghybs