gpt4 book ai didi

javascript - 使用 css/javascript 更改图例背景颜色

转载 作者:行者123 更新时间:2023-11-28 00:51:26 25 4
gpt4 key购买 nike

我是 css/javascript 新手!如果这是一个简单的问题,我深表歉意。我正在尝试向 map 添加图例,但我不知道如何将图例背景设为白色。现在,图例是透明的。

这是我在 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

最佳答案

我不完全确定我是否理解您发布的代码,但是,您使用 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 元素。如果我误解了你的问题并且这不起作用,请联系我更改我的答案。

关于javascript - 使用 css/javascript 更改图例背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53197987/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com