javascript - Leaflet - 设置工具提示样式

Question

我正在尝试在 Leaflet 中设置工具提示的样式。由于各种变化并尝试合并不同的模块，我一直在修复一些问题。

相关工具提示需要具有白色背景、粗黑边框、粗体文本和透明。

我想这会相当简单，而且我已经用 JS 和 html 管理了大部分内容。然而，无论出于何种原因，我无法让 CSS 与它一起工作(寻址 leaflet.css 文件)。

下面的代码是我目前的主要代码(是的，用蓝色而不是白色 - 使用它作为测试)。它是完美的，除了工具提示的其余部分(div 之外)是白色而不是黑色:

layer.bindTooltip("<div style='background:blue;'><b>" + area.toFixed(1) + "</b></div>", 
{
    direction: 'right',
    permanent: false,
    sticky: true,
    offset: [10, 0],
    opacity: 0.75,
    backgroundColor: 'black'
});

我尝试了一些我记得的 html 变体，以及使用类似的内容:

layer.bindTooltip("<div style='background:blue;'><b>" + area.toFixed(1) + "</b></div>", 
{
    direction: 'right',
    permanent: false,
    sticky: true,
    offset: [10, 0],
    opacity: 0.75,
    className: 'leaflet-tooltip'
});

并将 leaflet.css 文件中的 leaflet-tooltip 更改为:

.leaflet-tooltip {
    position: absolute;
    padding: 6px;
    background-color: #000;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #222;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

欢迎任何想法。我喜欢只使用一些简单的html，但如果CSS是可行的(不确定我做错了什么，我每次都会构建我的项目来处理JS，并且还进行一个标准构建，我认为CSS会这样做) )。

编辑 - 添加图片:

编辑-意识到我的问题是我仍然链接到在线CSS，而不是我自己的。已补救。现在尝试设置左侧“点”的样式，它仍然是白色的:

CSS 代码:

.leaflet-tooltip-own {
position: absolute;
padding: 5px;
background-color: rgba(0, 0, 0, 0.5);
border: 0px solid #000;
border-radius: 4px;
color: #000;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

最终编辑 - 找到，感谢 this post 。三 Angular 形(或“尾部”)的样式选项位于 .leaflet-tooltip-left:before 和 .leaflet-tooltip-right:before 中。新的 css 代码(仅更改了 border-left-color 和 border-right-color - 不必对 js 进行任何更改，因为这似乎是继承的):

.leaflet-tooltip-left:before {
right: 0;
margin-right: -12px;
border-left-color: rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip-right:before {
left: 0;
margin-left: -12px;
border-right-color: rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip-own {
position: absolute;
padding: 4px;
background-color: rgba(0, 0, 0, 0.4);
border: 0px solid #000;
color: #000;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

Answer 1

那么，有几个问题。

第一，我仍然链接到互联网上的 CSS，而不是使用我自己的。哎呀!

通过 CSS 进行样式设置时，三 Angular 形/尾部存在一些问题，可以在 .leaflet-tooltip-left:before 和 leaflet-tooltip-right:before 位中解决。

CSS:

.leaflet-tooltip-left:before {
    right: 0;
    margin-right: -12px;
    border-left-color: rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip-right:before {
    left: 0;
    margin-left: -12px;
    border-right-color: rgba(0, 0, 0, 0.4);
    }
.leaflet-tooltip-own {
    position: absolute;
    padding: 4px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 0px solid #000;
    color: #000;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

以及调用工具提示的js:

layer.bindTooltip("<div style='background:white; padding:1px 3px 1px 3px'><b>" + area.toFixed(1) + "</b></div>", 
{
    direction: 'right',
    permanent: false,
    sticky: true,
    offset: [10, 0],
    opacity: 0.75,
    className: 'leaflet-tooltip-own' 
});

This post非常有用。