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

Question

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

Answer 1

调用leaflet.css后，您可以添加一个<style>标记，其中包含以下规则，以更改弹出窗口和弹出提示的颜色。

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

这是我在Leaflet主页上编辑弹出窗口background-color之后拍摄的截图。如果您还有其他问题，请与我们联系。欢呼声。

Answer 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);
}

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

Answer 3

      const marker = new L.marker(lastPoint, {
        icon: markerIconSnake
      }).bindPopup(getDataInHtml(dataPopup), {
        className: 'stylePopup'
      })

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

    .stylePopup .leaflet-popup-content-wrapper,
    .stylePopup .leaflet-popup-tip {
        background-color: #f4913b;
        padding: 8px;
    }

如果您想了解更多信息，请访问the docs!

Answer 4

在我的情况下，我正在使用react-leaflet v2，但无法在具有material / core / styles的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属性中调用它

 <Popup onOpen={() => {updatePopupCss("#036597")}} >