如何基于Leaflet当前底图动态修改标记弹窗的CSS属性？

1. 确认底图图层名称 #

Folium默认生成的两个底图名称分别是：

• 浅色底图：OpenStreetMap
• 深色底图：CartoDBDark_Matter
  你也可以在Python代码里给图层明确指定name参数（见步骤3），确保名称和后续JS判断一致。

2. 插入JavaScript代码 #

打开Folium生成的HTML文件，找到</script>标签（通常在页面末尾），在它之前插入以下代码：

// 监听底图切换事件
map.on('baselayerchange', function(e) {
    const currentLayer = e.layer.options.name;
    const popupContents = document.querySelectorAll('.leaflet-popup-content');
    
    if (currentLayer === 'CartoDBDark_Matter') {
        popupContents.forEach(content => content.style.color = '#fff');
    } else {
        popupContents.forEach(content => content.style.color = '#333');
    }
});

// 页面加载时初始化字体颜色，匹配初始底图
window.addEventListener('load', function() {
    // 找到当前激活的底图图层
    const activeLayerKey = Object.keys(map._layers).find(key => {
        return map._layers[key] instanceof L.TileLayer && map.hasLayer(map._layers[key]);
    });
    if (!activeLayerKey) return;
    
    const currentLayer = map._layers[activeLayerKey].options.name;
    const popupContents = document.querySelectorAll('.leaflet-popup-content');
    
    if (currentLayer === 'CartoDBDark_Matter') {
        popupContents.forEach(content => content.style.color = '#fff');
    } else {
        popupContents.forEach(content => content.style.color = '#333');
    }
});

3. （可选）在Python代码中指定图层名称 #

为了避免默认名称变更导致JS判断失效，建议在Folium代码里给图层明确命名：

# 添加浅色底图
folium.TileLayer(
    'openstreetmap',
    name='OpenStreetMap'
).add_to(your_map_object)

# 添加深色底图
folium.TileLayer(
    'cartodb dark_matter',
    name='CartoDBDark_Matter'
).add_to(your_map_object)

# 添加图层控件
folium.LayerControl().add_to(your_map_object)

关键说明 #

• Leaflet的baselayerchange事件会在用户切换底图时自动触发，事件参数e包含当前激活的图层信息。
• .leaflet-popup-content是Leaflet弹窗内容的默认CSS容器类，修改它的color属性即可统一调整弹窗字体颜色。
• 页面加载时的初始化代码是为了确保打开地图时，字体颜色与初始显示的底图匹配。

内容的提问来源于stack exchange，提问作者Indigo Wizard