javascript - 传单类别上的标签颜色

Question

我想更改传单 map 的颜色。如您所见，在我的 blockbuilder 上:http://blockbuilder.org/renauld94/4a704ff30993fe35e019f3184aa31399

我有蓝色的医院和粉红色的药房。

对于我的药房，我有以下类别:2018 年、其他时期和从未涵盖。每个类别我想要 3 种不同的颜色。

我该如何修改它？

<style>
.leaflet-marker-icon {
    color: #fff;
    font-size: 16px;
    line-height: 16px;  
    text-align: center;
    vertical-align: middle;
    box-shadow: 2px 1px 4px rgba(0,0,0,0.3);
    border-radius: 8px;
    border:1px solid #fff;
}
.search-tip b {
    color: #fff;
}
.pharmacy.search-tip b,
.pharmacy.leaflet-marker-icon {
    background: #f6f
}
.hospital.search-tip b,
.hospital.leaflet-marker-icon {
    background: #66f
}

我正在尝试类似的东西:

pharmacy.type('2018').search-tip b,
.pharmacy.leaflet-marker-icon {
    background: #6cf8d5

.pharmacy(type = '2018').search-tip b,
.pharmacy.leaflet-marker-icon {
    background: #fb69fb
}

Answer 1

您可以考虑通过 pointToLayer function 为每个类型引入和传递一个附加类名 :

pointToLayer: function(feature, latlng) {
  return L.marker(latlng, {
    icon: L.divIcon({
      className: [feature.properties.amenity, " type" + feature.properties.type].join(' '),
      iconSize: L.point(16, 16),
      html: feature.properties.amenity[0].toUpperCase()
    })
  });
}

在哪里

.leaflet-marker-icon.pharmacy.type2018 {
    background: #6cf8d5
}

Demo