传单更改标记颜色

Question

有没有办法随机改变原生传单中的标记颜色？我正在使用可以设置样式的 svg 元素。我知道使用 mapbox.js 是可能的

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

这是我的代码:

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

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

Answer 1

所以这是 Google 设计 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: `<span style="${markerHtmlStyles}" />`
})

将 markerHtmlStyles 中的 background-color 更改为您的自定义颜色，然后就可以开始了。