从传单中的图例中删除“”答案

【问题标题】：Delete "" from legend in Leaflet从传单中的图例中删除“”
【发布时间】：2018-10-09 16:35:11
【问题描述】：

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

【问题讨论】：

标签： javascript html leaflet legend

【解决方案1】：

这就是大多数浏览器呈现 HTML <q>（用于 quotation）元素的方式：在其内容周围加上引号，即使是空的。

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

简单的解决方案是使用另一个标签，例如<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>

【讨论】：