时间戳

首页 > 解决方案 > 如何将传单地图背景设置为白色？

leaflet - 如何将传单地图背景设置为白色？

问题描述

我目前正在使用传单来显示数据，总的来说，它工作得很好，但是我们的 PM 希望地图背景是白色而不是灰色。现在，整个地图都是灰色背景，我检查了文档，根本找不到关于如何使背景变白的解决方案。非常感谢您的建议。

我看到这是由tileLayer引起的，

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + this.props.mapBoxToken, {
            //attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.light'
        })
        .addTo(this.map);

在这里，如果我删除 tileLayer，则可以看到背景颜色。我google了很多如何更改tilelayer颜色，但找不到解决方案，希望听到你的建议。

标签： leaflet

解决方案

如果你仔细查看 Leaflet 的CSS 文件，你会发现这些规则：

.leaflet-container {
    background: #ddd;
    outline: 0;
}

这就是使地图的容器背景变灰的原因。只需创建另一个覆盖它的 CSS 规则。

例如，如果您<div id='my-leaflet-map'></div>用作地图容器，那么类似

#my-leaflet-map {
    background: pink;
}

推荐阅读