如何更改 Leaflet 弹出窗口的背景颜色？答案

【问题标题】：How can I change the background color of a Leaflet popup?如何更改 Leaflet 弹出窗口的背景颜色？
【发布时间】：2013-12-12 00:16:23
【问题描述】：

我正在使用 Leafletjs 创建地图，我想将弹出窗口（当前正在显示的图像和链接）的背景颜色从白色更改为不同的颜色。似乎基本的背景颜色 css 语法不会削减它。有什么建议吗？谢谢， -斯科特

【问题讨论】：

标签： javascript popup leaflet

【解决方案1】：

调用leaflet.css后，你可以包含<style>标签，规则如下改变弹窗颜色和弹窗提示。

.leaflet-popup-content-wrapper, .leaflet-popup.tip {
  background-color: #000
}

这是我在 Leaflet 主页上编辑 background-color 后拍摄的屏幕截图。如果您还有其他问题，请告诉我。干杯。

【讨论】：

太棒了！谢谢。

【解决方案2】：

打开leaflet.css并搜索：

    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip {
    background: rgb(111, 51, 51);
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}

然后将背景值更改为您想要的任何颜色。

【讨论】：

【解决方案3】：

常量标记 = 新 L.marker(lastPoint, { 图标：markerIconSnake }).bindPopup(getDataInHtml(dataPopup), { 类名：'stylePopup' })

如果您想更改弹出窗口的背景颜色，可以使用方法 .bindPopup（在您的标记中）并添加一个 css 类。

.stylePopup .leaflet-popup-content-wrapper, .stylePopup .leaflet-popup-tip { 背景颜色：#f4913b；填充：8px； }

如果您想了解更多信息，请前往the docs!

【讨论】：

【解决方案4】：

在我的情况下，我使用的是 react-leaflet v2，并且无法在带有材料/核心/样式的 js 中使用 css。我创建了一个函数

const updatePopupCss = (color) => {
    let popupElement = document.getElementsByClassName("leaflet-popup-content-wrapper");
    let htmlPopupElement;
    if (popupElement[0] instanceof HTMLElement) {
        htmlPopupElement = popupElement[0] as HTMLElement;
        htmlPopupElement.style.backgroundColor = color;
        console.log(htmlPopupElement)
    }
}

然后像这样从 onOpen 属性调用它

 &lt;Popup onOpen={() =&gt; {updatePopupCss("#036597")}} &gt;

【讨论】：