Question

我有一个简单的传单地图，上面有一些标记。为了给用户带来更好的体验，我想突出显示单击的标记。最好和最简单的方法是，如果我可以将其他类添加到单击的标记中，以在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')了，但是由于传单标记逻辑，所以它没有用。

Answer 1

标记不是DOM对象，因此尝试向其添加类不是很好。

如果您要为图标设置样式，则可以使用

function onClick(e) {

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

传单-单击将类添加到标记图标

1 个答案: