传单改变标记颜色

Question

有没有一种方法可以随意改变本地传单中的标记颜色？我使用的是svg元素，可以进行样式化。我知道使用Mapbox.js是可能的

编辑：为了澄清我打算做的：如果你通过双击或其他方式向地图添加标记，它应该有随机的颜色。为了实现这一点，我想使用svg图标来对标记进行样式化。

这是我的代码：

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

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

Answer 1

因此，这是谷歌中最受欢迎的传单图标样式之一，但它没有一个没有第三方的解决方案，我在React中遇到了这个问题，因为我们需要动态颜色为我们的路线和图标。

我提出的解决方案是使用leaflet.diviconhtml属性，它允许您将计算值的字符串传递到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更改为您自定义的颜色，就可以使用了。