如何动态着色 vue2 传单标记？

Question

我有一个google-maps_pin.svg代表 google-maps pin的文件。

我想根据类别（餐厅、美术馆等）动态地为不同的标记（使用 v-for 生成）着色。

有没有办法用 vue2 传单来实现？

这是我的地图：

<l-map 
  style="z-index: 0" 
  ref="mapRef" 
  :zoom="zoom" 
  :center="center" 
  @update:zoom="zoomUpdated" 
  @update:center="centerUpdated"
  @update:bounds="boundsUpdated">
  <l-tile-layer :url="url"></l-tile-layer>
  <l-marker 
      v-for="(markedLocation, index) in marker" 
      :key="'marker-' + index" 
      :lat-lng="markedLocation.location" 
      :icon-url="require('@/assets/googlemaps_markers/google-maps_pin.svg')">
  </l-marker>
</l-map>

我想赋予单个引脚的颜色存储在markedLocation.info.category.color变量中。

Answer 1

是的，您可以使用此属性L.divIcon() 来实现。

表示使用简单<div>元素而不是图像的标记的轻量级图标。继承自 Icon 但忽略 iconUrl 和阴影选项。

您的模板将如下所示

<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>

你的getIcon()方法会是这样的

<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>

您可以在此处使用有效的JS fiddle 进行检查，请参阅下面从 JS fiddle 截取的屏幕截图。