如何使用 NUXT.js 为我的传单地图设置自定义标记图标答案

【问题标题】：How can I set the custom marker icon for my leaflet map with NUXT.js如何使用 NUXT.js 为我的传单地图设置自定义标记图标
【发布时间】：2019-06-24 18:20:22
【问题描述】：

我正在尝试将标记图标更改为我的 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)

我看到一个白色方块

【问题讨论】：

在尝试加载 /assets/img/map_markers/marker-icon-2x-red.png 时，您的浏览器错误控制台显示什么？另请注意，它们没有为您的自定义标记定义iconRetinaUrl，我不确定是否有回退到默认标记。
@scai 我添加了iconRetinaUrl 选项，但结果是一样的。浏览器控制台中完全没有错误。简单的白色矩形没有任何错误。

标签： javascript vue.js leaflet nuxt.js

【解决方案1】：

您在传递适用于 Leaflet Icon 的选项时实例化 Leaflet DivIcon。

在这种情况下使用L.icon 而不是L.divIcon。

Icon 期望 iconUrl（和其他 *Url）选项将相应的图像放置在地图上。

DivIcon 不会放置图像，而是放置一个纯 HTML div 元素，因此您可以使用任意 HTML 内容填充它。默认情况下，它的样式是带有黑色边框的白色正方形。

【讨论】：

它就像一个魅力！非常感谢。您能否更详细地描述一下，为什么 L.icon 有效而 L.divIcon 无效？
添加了更多细节