2

リーフレットのポップアップに 2 つの異なるスタイルを設定することはできますか? 2 つの異なるポップアップ (スタイルとコンテンツに関して) が、ユーザー インタラクションでトリガーされmouseoverますclick。

問題: 1 つのポップアップ スタイルで機能するスタイルシートでCSS スタイルをオーバーライドしようとしました.leaflet-popup-content-wrapper'が、実行時に 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');
})
4

1 に答える 1

8

bindPopupメソッドには、ポップアップの div に追加される属性を"options"含むパラメーターを渡すことができます。"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();
})
于 2012-10-03T18:53:47.770 に答える