javascript - 如何动态地为 vue2 传单标记着色?

标签 javascript vue.js leaflet vue2leaflet

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

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

有没有办法用 vue2 leaflet 实现这一点?

这是我的 map :

<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 变量中。

最佳答案

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

Represents a lightweight icon for markers that uses a simple <div> element instead of an image. Inherits from Icon but ignores the iconUrl and shadow options.

您的模板将如下所示

<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()方法将是这样的

getIcon(item) {
  return L.divIcon({
    className: "my-custom-pin",
    html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 34.892337" height="60" width="40">
  <g transform="translate(-814.59595,-274.38623)">
    <g transform="matrix(1.1855854,0,0,1.1855854,-151.17715,-57.3976)">
      <path d="m 817.11249,282.97118 c -1.25816,1.34277 -2.04623,3.29881 -2.01563,5.13867 0.0639,3.84476 1.79693,5.3002 4.56836,10.59179 0.99832,2.32851 2.04027,4.79237 3.03125,8.87305 0.13772,0.60193 0.27203,1.16104 0.33416,1.20948 0.0621,0.0485 0.19644,-0.51262 0.33416,-1.11455 0.99098,-4.08068 2.03293,-6.54258 3.03125,-8.87109 2.77143,-5.29159 4.50444,-6.74704 4.56836,-10.5918 0.0306,-1.83986 -0.75942,-3.79785 -2.01758,-5.14062 -1.43724,-1.53389 -3.60504,-2.66908 -5.91619,-2.71655 -2.31115,-0.0475 -4.4809,1.08773 -5.91814,2.62162 z" style="fill:${item.color};stroke:${item.strokeColor};"/>
      <circle r="3.0355" cy="288.25278" cx="823.03064" id="path3049" style="display:inline;fill:${item.circleColor};"/>
    </g>
  </g>
</svg>`
  });
}

你可以在这里查看工作 JS fiddle 请看下面从 JS fiddle 截取的屏幕截图。

enter image description here

关于javascript - 如何动态地为 vue2 传单标记着色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59376525/

相关文章:

javascript - 如何使用传单图表在 reactjs 中显示数组中的标记

javascript - 使用 markerclusterer 为 map v3 手动绘制集群

javascript - 如何使用两个日期的 getTime() 正确计算 JS 中的剩余时间?

javascript - 发布用户数据,用于个人资料页面

javascript - 具有富文本就地编辑功能的 Flask 表单

vue.js - 防止url出现或修改当前地址栏值

javascript - VueJS - 数据列表输入未清除值

vue.js - Vue 提示使用 Plasmo 创建基于 React 的项目

javascript - 传单控制Joomla问题

css - 按下时更改传单簇的样式