2种不同的Leaflet Popup款式

Question

在Leaflet中可以为Popups设置2种不同的样式吗？将在用户交互时触发2个不同的弹出窗口(在样式和内容方面),一个开启mouseover,一个开启click.

问题:我尝试.leaflet-popup-content-wrapper'在样式表中覆盖CSS样式,该样式表适用于一种弹出样式,无法在运行时切换CSS样式以在两种CSS样式之间来回切换,可能是因为弹出的DOM元素尚未加载.

marker.on('mouseover', function() {
    marker.bindPopup('<b>Hello world</b>');
    marker.openPopup();
})

marker.on('click', function() {
    marker.bindPopup('<b>Click click</b>');
    marker.openPopup();

    // Failed attempt to switch style
    $('.leaflet-popup-content-wrapper').addClass('new-style');
})

Answer 1

该bindPopup方法可以传递一个"options"参数,该参数可以包含一个"className"属性,该属性将被添加到弹出窗口的div中:

marker.on('mouseover', function() {
    marker.bindPopup('<b>Hello world</b>',{className: 'mouseover-popup'});
    marker.openPopup();
})

marker.on('click', function() {
    marker.bindPopup('<b>Hello world</b>',{className: 'click-popup'});
    marker.openPopup();
})