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

Posted 2023-02-16

【中文标题】从传单中的图例中删除“”

【英文标题】：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);

【参考方案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>