Question

我目前正在使用传单显示数据，总的来说，它工作得很好，但是我们的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上搜索了很多如何更改图块颜色的方法，但是找不到解决方法，希望能听到您的建议。

Answer 1

如果您查看Leaflet的CSS file carefully，则会发现以下规则：

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

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

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

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

Answer 2

由地图框https://www.mapbox.com/api-documentation/#maps的map.id控制

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

2 个答案: