传单-如示例所示，如何创建具有动态色彩的矩形符号？

Question

我需要创建一个矩形标记，在其中显示一个温度，并且颜色在该温度范围内是相对的。 我附上一个例子：

目前，我设法通过弹出窗口来做到这一点，但我不喜欢它。

Answer 1

听起来您应该使用带有DivIcon的传单标记，而不是弹出窗口：

  

代表用于标记的轻量级图标，该图标使用简单的<div>元素而不是图像。

var myIcon = L.divIcon({
  html: '25.6 °C',
  className: 'my-div-icon'
});
// you can set .my-div-icon styles in CSS
L.marker([50.505, 30.57], {
  icon: myIcon
}).addTo(map);

实时示例：

var map = L.map('map').setView([50.505, 30.57], 11);

var myIcon = L.divIcon({
  html: '25.6 °C',
  className: 'my-div-icon',
  iconSize: [50, 20]
});
// you can set .my-div-icon styles in CSS
L.marker([50.505, 30.57], {
  icon: myIcon
}).addTo(map);

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

.my-div-icon {
  background: orange;
  border: 2px solid darkorange;
  border-radius: 5px;
  text-align: center;
  line-height: 20px;
}

html,
body,
#map {
  height: 100%;
  margin: 0;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet-src.js" integrity="sha512-+ZaXMZ7sjFMiCigvm8WjllFy6g3aou3+GZngAtugLzrmPFKFK7yjSri0XnElvCTu/PrifAYQuxZTybAEkA8VOA==" crossorigin=""></script>

<div id="map"></div>