Question

我目前正试图根据找到的图层为弹出窗口提供不同的背景（即我有一个名为Indigenous Sites的图层，我希望弹出窗口的背景与其他图层不同）。

我试过给弹出一个className，但我不确定如何在CSS中正确调用它。

下面是我的html文档中的弹出脚本示例（2个不同图层弹出窗口的脚本）：

// popup for the Other European Sites layer 
map.on('click', 'Other European Sites', function (e) {
new mapboxgl.Popup()
    .setLngLat(e.lngLat)
    .setHTML('<h2>' + 'European Site' + '</h2>' + 
        '<p>' + e.features[0].properties.placeName + '</p>' + 
        '<h2>' + 'Story' + '</h2>' + 
        '<p>' + e.features[0].properties.Story + '</p>' + 
        '<h2>' + 'Latitude' + '</h2>' + 
        '<p>' + e.features[0].properties.latitude + '</p>'  + 
        '<h2>' + 'Longitude' + '</h2>' + 
        '<p>' + e.features[0].properties.longitude + '</p>')
    .addTo(map);
});

// popup for the Other Indigenous Sites layer
map.on('click', 'Other Indigenous Sites', function (e) {
new mapboxgl.Popup({className: 'popupCustom'})
    .setLngLat(e.lngLat)
    .setHTML('<h2>' + 'Indigenous Site' + '</h2>' + 
        '<p>' + e.features[0].properties.placeName + '</p>' + 
        '<h2>' + 'Story' + '</h2>' + 
        '<p>' + e.features[0].properties.Story + '</p>' + 
        '<h2>' + 'Latitude' + '</h2>' + 
        '<p>' + e.features[0].properties.latitude + '</p>'  + 
        '<h2>' + 'Longitude' + '</h2>' + 
        '<p>' + e.features[0].properties.longitude + '</p>')
    .addTo(map);
});

这是我当前的CSS，它为我的所有弹出窗口提供了相同的背景：

.mapboxgl-popup-content {
overflow-y: scroll;
background-color: #000000;
}

我如何分配弹出窗口的不同classNames并在CSS中调用它们以便我可以为每个图层设置不同的背景？

非常感谢任何输入！

Answer 1

className是一个CSS类名，将应用于弹出容器（包含＆＃34; mapboxgl-popup-content＆＃34;元素）。所以，如果你想要你的＆＃34;其他原住民网站＆＃34;例如，黄色弹出窗口，你可以这样做：

.mapboxgl-popup-content {
    overflow-y: scroll;
    background-color: #000000;
}

.popupCustom .mapboxgl-popup-content {
    background-color: yellow;
}

但请注意，此功能仅非常recently added，我认为它尚未发布。（它不在published docs）。

样式弹出窗口的不同取决于使用Mapbox GL JS

1 个答案: