2 種類のチラシポップアップスタイル

Question

リーフレットのポップアップには 2 つの異なるスタイルを使用できますか?ユーザー操作 (スタイルとコンテンツの観点から) で 2 つの異なるポップアップがトリガーされ、1 つはマウスオーバーで、もう 1 つはクリックでトリガーされます。

問題: ポップアップに適用されるスタイルシートの .leaflet-popup-content-wrapper の CSS スタイルをオーバーライドしようとしていますただし、おそらくポップアップ DOM 要素がまだ読み込まれていないため、実行時に 2 つの CSS スタイル間で CSS スタイルを切り替えることはできません。

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

マーカー.on('クリック', function() {
    marker.bindPopup('<b>クリッククリック</b>');
    マーカー.openPopup();

    // スタイルの切り替えに失敗しました
    $('.leaflet-popup-content-wrapper').addClass('new-style');
})

Answer 1

bindPopup メソッドには "options" パラメータを渡すことができ、このパラメータには div に追加される "className" 属性を含めることができます。ポップアップ:

リーリー