在Leaflet中访问标记图标的HTMLElement

Question

I have some markers with custom icons (DivIcons) on my map.

When I click on one marker, I want to access to the HTMLElement of the icon, to add or remove classes.

The only way I have found to access the HTMLElement is the _icon property. I understand it's a private property, but I can't find another way.

The options.icon returns me the icon object (used by many markers), not the concrete HTMLElement for this marker.

Do you know a safe way to access to the HTMLElement of a marker ?

Answer 1

Unfortunately, JavaScript does not have native support for private properties. However, there are several techniques to emulate them: one using prefixes, the other closures.

The use of an underscore prefix is just a coding convention and is not enforced by the language: there is nothing to prevent a user from directly accessing a property that is "supposed to be private". This method is not safe, and it serves only as a guideline for client code. So I don't think that any harm can be done by accessing _icon property.

If a property is supposed to be private without possibility to be accessed from the outside, it is usually set as a local variable of a certain scope without being binded to the context. This type of variables can be accessed from the outside only with the help of closures, and if they are not defined, the variable can't be accessed.

Answer 2

I have found a documented way to access it :

Since I am in a "click" event, I can access the marker's HTMLElement with event.originalEvent.target in the callback.

http://leafletjs.com/reference.html#event-objects