[英]How can I set the custom marker icon for my leaflet map with NUXT.js
我正在尝试更改 OpenStreetMap 上单独标记的标记图标。
mapIconsReinit(L) {
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.imagePath = ''
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('@/assets/img/map_markers/default/marker-icon-2x.png'),
iconUrl: require('@/assets/img/map_markers/default/marker-icon.png'),
shadowUrl: require('@/assets/img/map_markers/default/marker-shadow.png'),
});
},
getMarkerIcon(L, color) {
return L.divIcon({
iconRetinaUrl: require('@/assets/img/map_markers/marker-icon-2x-' + color + '.png'),
iconUrl: require('@/assets/img/map_markers/marker-icon-' + color + '.png'),
shadowUrl: require('@/assets/img/map_markers/marker-shadow.png'),
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
})
}
第一个函数适用于像'@/...'
这样'@/...'
路径,但第二个函数 - 不。
默认标记工作正常:
L.marker([marker.lat, marker.lng]).addTo(_context.map)
但如果我尝试使用自定义标记:
L.marker([marker.lat, marker.lng], {icon: this.getMarkerIcon(L, "red")}).addTo(_context.map)
我看到一个白色方块
您实例化一个 Leaflet DivIcon,同时传递适用于 Leaflet Icon 的选项。
在这种情况下使用L.icon
而不是L.divIcon
。
Icon 需要 iconUrl(和其他 *Url)选项将相应的图像放置在地图上。
DivIcon 不放置图像,而是放置一个裸 HTML div 元素,因此您可以用任意 HTML 内容填充它。 默认情况下,它的样式为带有黑色边框的白色方块。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.