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

2种不同的Leaflet Popup款式

1 个答案: