Leaflet - добавить класс к значку маркера по клику - PullRequest
0 голосов
/ 29 ноября 2018

У меня есть простая карта листовки и несколько маркеров на ней.Чтобы дать пользователю лучшее впечатление, я хочу выделить маркер, на который нажали.Лучшим и самым простым было бы, если бы я мог просто добавить дополнительный класс к нажатому маркеру, чтобы он работал с CSS.Но я не знаю как, и все, что я нашел, не отвечало на мой вопрос, или я просто не понял этого.

Javascript

//Set the marker icon

    var markerIcon = L.vectorIcon({
            className: 'markerIcon',
            svgHeight: 30,
            svgWidth: 30,
            shape: {r: '15', cx: '15', cy: '15'},
            style: {
                fill: '#73B0E1'
            }
    });


//Populate the map with markers

    var markers = L.markerClusterGroup({});
    if(mapID == 'mapPublic') {
        markers.addLayer(L.marker([50, 8], {icon: markerIcon})).on('click', onClick);
        markers.addLayer(L.marker([50, 8.1], {icon: markerIcon})).on('click', onClick);
        markers.addLayer(L.marker([50, 8.2], {icon: markerIcon})).on('click', onClick);
        markers.addLayer(L.marker([50.1, 8.1], {icon: markerIcon})).on('click', onClick);
    }

    map.addLayer(markers);


//Onclick Function for the markers

    function onClick() {}

Как мне добавить второй класс к маркеру для работы с ним в css?Я уже попробовал this.classList.add('activeMarker'), но это не сработало, я думаю из-за логики маркера листовок.

1 Ответ

0 голосов
/ 29 ноября 2018

Маркер не является объектом DOM, поэтому нет смысла добавлять к нему классы.

Если вы пытаетесь стилизовать иконку, вы можете использовать

function onClick(e) {

e.layer._icon.classList.add('activemarker');
}
...