在传单中使用 CSS 更改标记图标的颜色的问题答案

【问题标题】：Issue changing the color of a markers icon with CSS in leaflet在传单中使用 CSS 更改标记图标的颜色的问题
【发布时间】：2020-07-30 08:53:08
【问题描述】：

我想通过使用 CSS 更改 fill 来更改传单标记图标的颜色。我给了我的图标一个className 并试图用那个className 更改fill，但它不起作用。我用 L.DivIcon 和 L.icon 试过了。我在我的代码中使用 Vue.js，下面的 JavaScript 代码在 mounted 中。这是我的代码：

JavaScript：

var marker_box = L.marker([-5,-10], {
  icon: L.icon({
    className: 'my-box',
    iconUrl: require('/Users/.../src/assets/box.svg'),
    iconSize: [25, 25],
    iconAnchor: [15, 10]
  })
}).addTo(map);

CSS：

.my-box{
  fill: red;
}

这是我的 svg 图标：

<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
  <path d="M0 0h24v24H0z" fill="none"/>
  <rect width="8.672" height="11.274" x="7.988" y="6.398" ry="0" 
   fill="#59f" fill-rule="evenodd" stroke="#000109" 
   stroke-width=".309" paint-order="fill markers stroke"/>
</svg>

【问题讨论】：

我不明白你为什么需要一个 svg 图标。您可以简单地添加一个空的div 并设置一个background-color:#4e2828 和border: solid black 1px，在这种情况下更改背景颜色会容易得多。
欢迎来到 stackoverflow 社区 ;) 现在，具体来说，这应该可以工作 .my-box path {fill: red; } 如果你想更改 rect，你需要这样做 .my-box rect {fill: red; } 只有 fill="none" 可能有问题所以最后加上 !Important 如果它不起作用。
@loicEzt 是的，这可能是一个选项，但我有其他复杂的图标，我想更改其颜色并且无法使用此方法。我只是为这个例子取了一个简单的图标。
@GrzegorzT。谢谢！ :) 我试过 '.my-box path {fill: red; }' 和 '.my-box rect {fill: red; }' 但它也不起作用.. 而且我不明白，我与 'fill="none" ' 有什么关系？

标签： css vuejs2 colors leaflet icons

【解决方案1】：

我将示例转换为 vue，我在 css 中更改了颜色。

var {
  LMap,
  LTileLayer,
  LMarker
} = Vue2Leaflet;

new Vue({
  el: '#app',
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data() {
    return {
      zoom: 13,
      center: L.latLng(47.413220, -1.219482),
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      markers: [{
        location: L.latLng(47.413220, -1.219482),
        circleColor: '#ecc9c9'
      }, {
        location: L.latLng(47.413210, -1.211160),
        circleColor: '#ecc9c9'
      }]
    }
  },
  methods: {
    getIcon(item) {
      return L.divIcon({
        className: "my-custom-pin",
        html: `<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
  <path d="M0 0h24v24H0z" fill="none"/>
  <rect width="8.672" height="11.274" x="7.988" y="6.398" ry="0" 
   fill="#59f" fill-rule="evenodd" stroke="#000109" 
   stroke-width=".309" paint-order="fill markers stroke"/>
</svg>`
      });
    }
  }
});

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

.my-custom-pin {
  background-color: transparent;
}

.my-custom-pin path {
  fill: black;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue2-leaflet@1.0.1/dist/vue2-leaflet.js"></script>

<div id="app">
  <l-map :zoom="zoom" :center="center">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker v-for="(item, index) in markers" :key="'marker-' + index" :lat-lng="item.location" :icon="getIcon(item)"></l-marker>
  </l-map>
</div>

【讨论】：

感谢您的帮助。我在我的代码中尝试了您的解决方案，但它仍然无法正常工作。我用的是Vue.js 不知道要不要注意别的。我将函数colorMarker() 放入方法中，将L.marker 放入已安装。我发现更改颜色的唯一方法是用 svg 中的变量替换填充颜色，如 fill="'+fillColor+'" ，并通过为 fillColor 提供新值来更改填充颜色。但这可能不是解决这个问题的最佳方法..
你认为vue的信息是多余的吗？不幸的是，当没有提供所有数据时就是这种情况。给未来的一课:)
是的，抱歉，我认为这并不重要。我会指定我的问题:)
我在vue中做了一个传单地图的例子。
我分别使用Vue.js和Leaflet，不知道还有Vue2-Leaflet的组合。您认为使用 Vue2-Leaflet 组合更好吗？如果我切换到 Vue2-Leaflet ，代码会有很多变化吗？谢谢