2 种不同的传单弹出样式

Question

Leaflet 中的 Popups 是否可以有 2 种不同的样式？用户交互时将触发 2 个不同的弹出窗口（就样式和内容而言），一个是在鼠标悬停时触发，一个是在单击时触发。

问题：我尝试覆盖适用于一种弹出样式的样式表中 .leaflet-popup-content-wrapper' 的 CSS 样式，但无法运行时切换CSS样式在2种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" 参数，该参数可以包含将添加到 div 的 "className" 属性对于弹出窗口：

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();
})