使用CSS / JavaScript更改圖例背景顏色

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

編輯： 這就是帶有圖例的地圖現在的樣子

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元素中。 如果我誤解了您的問題，但是仍然無法解決問題，請打擾我以更改答案。