2

Leaflet中的弹出窗口是否可以有2种不同的样式？用户交互时将触发 2 个不同的弹出窗口（在样式和内容方面），一个 onmouseover和一个 on 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');
})
4

1 回答 1

8

该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();
})
于 2012-10-03T18:53:47.770 回答