Leaflet

Question

我有一张简单的传单地图和一些标记。为了给用户更好的体验，我想突出显示点击的标记。最好和最简单的方法是，如果我可以向单击的标记添加一个额外的 class 以使用它处理 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() {}

如何向标记添加第二个 class 以便在 css 中使用它？我已经试过了 this.classList.add('activeMarker') 但它没有用，我想是因为传单标记逻辑。

Answer 1

标记不是 DOM 对象，因此尝试向其添加类是没有用的。

如果您尝试设置图标样式，您可以使用

function onClick(e) {

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

Leaflet - 在点击时将 class 添加到标记图标

Leaflet - add class to marker icon on click

javascript

marker