从Leaflet中的图例中删除“”

Question

向Leaflet JS地图添加图例。

但在彩色框内，出现了""个（双引号）：

我该如何删除？

使用：

function getColour(d) {
  switch (d) {
    case '> 2 uur':
      return 'green';
    case '1 - 2 uur':
      return 'yellow';
    case '30 min - 1 uur':
      return 'orange';
    case '< 30 min':
      return 'red';
    default:
      return '#fff';
  }
};

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

legend.onAdd = function(mymap) {
  var div = L.DomUtil.create('div', 'info legend');
  grades = ['> 2 uur', '1 - 2 uur', '30 min - 1 uur', '< 30 min'];
  for (var q = 0; q < grades.length; q++) {
    div.innerHTML +=
      '<q style="background:' + getColour(grades[q]) + '"></q> '
      + (grades[q] ? grades[q] + '<br>' : '+');
  }
  return div;
};
legend.addTo(mymap);

Answer 1

这就是大多数浏览器都会呈现HTML <q>（对于引用）元素的方式：围绕其内容引用，即使是空的。

  

大多数现代浏览器通过用引号括起文本来实现这一点。

简单的解决方案是使用其他标签，例如一个<span>。确保指定宽度。

或者重新设置<q>元素，我认为你必须覆盖它的:before和:after伪选择器。但是，您可能仍需要指定其宽度。

更简单的解决方案就是将<q>元素color设置为transparent：

q {
  color: transparent;
}

演示：

var mymap = L.map('map').setView([48.86, 2.35], 11);

function getColour(d) {
  switch (d) {
    case '> 2 uur':
      return 'green';
    case '1 - 2 uur':
      return 'yellow';
    case '30 min - 1 uur':
      return 'orange';
    case '< 30 min':
      return 'red';
    default:
      return '#fff';
  }
};

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

legend.onAdd = function(mymap) {
  var div = L.DomUtil.create('div', 'info legend');
  grades = ['> 2 uur', '1 - 2 uur', '30 min - 1 uur', '< 30 min'];
  for (var q = 0; q < grades.length; q++) {
    div.innerHTML +=
      '<q style="background:' + getColour(grades[q]) + '"></q> ' + (grades[q] ? grades[q] + '<br>' : '+');
  }
  return div;
};
legend.addTo(mymap);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);

.info q {
  color: transparent;
}

.info {
  background-color: white;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 180px"></div>