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