应用于Mapbox弹出窗口的CSS无法加载 [英] CSS applied to mapbox popup not loading

问题描述

我正在使用自定义CSS设置显示在 mapbox 中的弹出窗口的样式.但是CSS不适用于弹出窗口.

I am styling the popup appearing in the mapbox using a customized CSS. But the CSS ain't applying to the popup.

 var popup=new mapbox.Popup({offset:25,closeButton:false,closeOnMove:true,className:'pop-up'})
                .setHTML(
                  '<div >'+
                    '<p>'+
                      Hello+
                    '</p>'+
                  '</div>'
                  );

我的CSS代码:

.pop-up{
    color: #F3F3DD;
    background-color: #91785D;
    border-color: #91785D;
    max-width: 50px;
    box-shadow: 3px 3px 2px #8B5D33;
    font-family: 'Oswald';
}

如何解决此问题?

推荐答案

将完全相同的代码添加到JSFiddle中可显示期望的结果而不会出现问题:https://jsfiddle.net/ag9u8fvs/.

Adding your exact same code to a JSFiddle shows the desired results without issue: https://jsfiddle.net/ag9u8fvs/.

因此，可能是CSS未正确链接到HTML的情况.

As such, it might be the case that your CSS is not properly linked to your HTML.

HTML:

var popup = new mapboxgl.Popup({
        offset:25,
        closeButton:false,
        closeOnMove:true,
        className:'pop-up'
    })
    .setLngLat([-96, 37.8])
    .setHTML('<h1>Hello World!</h1>')
    .addTo(map);

CSS:

.pop-up{
    color: #F3F3DD;
    background-color: #91785D;
    border-color: #91785D;
    max-width: 50px;
    box-shadow: 3px 3px 2px #8B5D33;
    font-family: 'Oswald';
}

如果您看不到代码和链接的JSFiddle之间的任何差异，这可能导致自定义CSS无法按预期应用，则可以跟着一个指向JSFiddle的链接，该链接重现您作为注释看到的错误在这里，以便我们仔细看看.

If you can't notice any differences between your code and the linked JSFiddle which might be responsible for your custom CSS not applying as expected, you could follow up with a link to a JSFiddle reproducing the error you are seeing as a comment here so that we can take a closer look.

这篇关于应用于Mapbox弹出窗口的CSS无法加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！