如何动态地为 vue2 传单标记着色?
How to color vue2 leaflet markers dynamically?
我有一个 google-maps_pin.svg
文件,它代表一个 google-maps pin。
我想根据类别(餐厅、美术馆等)动态地为不同的标记(用 v-for 生成)着色。
有没有办法用 vue2 leaflet 实现?
这是我的地图:
<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.
截取的屏幕截图
我正在使用这个pointhi/leaflet-color-markers
我有一个包含我所有图标的图标颜色文件:
export const redIcon = new L.Icon({
iconUrl:
"https://raw.githubusercontent.com/pointhi/leaflet-color-
markers/master/img/marker-icon-2x-red.png",
shadowUrl:
"https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-
shadow.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
然后,我在地图中使用我的 redIcon,如下所示:
<l-marker
v-for="(item, index) in list"
:key="index"
:icon="getIcon()"
>
getIcon() {
return redIcon;
}
我有一个 google-maps_pin.svg
文件,它代表一个 google-maps pin。
我想根据类别(餐厅、美术馆等)动态地为不同的标记(用 v-for 生成)着色。
有没有办法用 vue2 leaflet 实现?
这是我的地图:
<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.
截取的屏幕截图我正在使用这个pointhi/leaflet-color-markers
我有一个包含我所有图标的图标颜色文件:
export const redIcon = new L.Icon({
iconUrl:
"https://raw.githubusercontent.com/pointhi/leaflet-color-
markers/master/img/marker-icon-2x-red.png",
shadowUrl:
"https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-
shadow.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
然后,我在地图中使用我的 redIcon,如下所示:
<l-marker
v-for="(item, index) in list"
:key="index"
:icon="getIcon()"
>
getIcon() {
return redIcon;
}