宣传单更改标记颜色

有没有办法随机更改原生Leaflet中的标记颜色？我正在使用可以设计风格的svg元素.我知道mapbox.js是可行的

编辑:澄清我打算做什么:如果您通过双击或其他东西添加标记,它应该有随机颜色.为了实现这一点,我想使用标记的svg图标来设置它们的样式.

这是我的代码:

myIcon = L.icon({
  iconUrl: "icon_33997.svg",
  iconAnchor: pinAnchor
});

newMarker = L.marker(lat, long], {
  icon: myIcon
});

tutts.. 51

所以这是谷歌在设计Leaflet Icon时的最佳热门之一,但它没有一个没有第三方的解决方案,我在React中遇到了这个问题,因为我们需要动态颜色来处理我们的路线和图标.

我想出的解决方案是使用Leaflet.DivIcon html属性,它允许您传递一个被评估为DOM元素的字符串.

例如,我创建了一个标记样式如下:

const myCustomColour = '#583470'

const markerHtmlStyles = `
  background-color: ${myCustomColour};
  width: 3rem;
  height: 3rem;
  display: block;
  left: -1.5rem;
  top: -1.5rem;
  position: relative;
  border-radius: 3rem 3rem 0;
  transform: rotate(45deg);
  border: 1px solid #FFFFFF`

const icon = Leaflet.divIcon({
  className: "my-custom-pin",
  iconAnchor: [0, 24],
  labelAnchor: [-6, 0],
  popupAnchor: [0, -36],
  html: ``
})