Question

我是CSS / JavaScript的新手！如果这是一个简单的问题，我深表歉意。我试图在地图上添加图例，但是我不知道如何将图例背景设置为白色。现在，图例是透明的。

这是我在CSS中拥有的

#legend {font-family: Arial, sans-serif;
   background: #fff;
    padding: 10px;
    margin: 10px;
    border: 3px solid #000;

然后使用js

var legend = L.control({position: 'topright'});

    legend.onAdd = function (mymap) {

        var div = L.DomUtil.create('div', 'legend'),
        grades = ["Library", "Parking Lot"],
        labels = ["http://maps.google.com/mapfiles/ms/micons/rangerstation.png", "http://maps.google.com/mapfiles/ms/micons/parkinglot.png"];

// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
        div.innerHTML +=
    (" <img src="+ labels[i] +" height='50' width='50'>") + grades[i] + '<br>';
}
return div; } legend.addTo(mymap);

编辑： This is what the map looks like right now with the legend

Answer 1

我不确定我是否理解您发布的代码，但是，您使用var div = L.DomUtil.create('div', 'legend')创建了一个名为 div 的新元素，您想添加背景到呢？如果是这样，请尝试执行以下操作：

var legend = L.control({position: 'topright'});

    legend.onAdd = function (mymap) {

        var div = L.DomUtil.create('div', 'legend'),
        grades = ["Library", "Parking Lot"],
        labels = ["http://maps.google.com/mapfiles/ms/micons/rangerstation.png", "http://maps.google.com/mapfiles/ms/micons/parkinglot.png"];

        // Add the ID to the div element that will match #legend
        div.id = "legend";

// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
        div.innerHTML +=
    (" <img src="+ labels[i] +" height='50' width='50'>") + grades[i] + '<br>';
}
return div; } legend.addTo(mymap);

因此，请尝试将 legend ID添加到您具有的函数内的div元素中。如果我误解了您的问题，但仍无法解决问题，请打我改变答案。

使用CSS / JavaScript更改图例背景颜色

1 个答案: