Javascript 如何使用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)

我看见一个白色的正方形

---

实例化传单图标，而传递适用于传单图标的选项

在这种情况下，请使用

L.icon

而不是

L.divIcon

图标需要iconUrl（和其他*Url）选项将相应的图像放置在地图上

---

DivIcon不放置图像，而是放置一个空的HTMLdiv元素，这样您就可以用任意HTML内容填充它。默认情况下，它的样式为带黑色边框的白色正方形。

当试图加载

/assets/img/map\u markers/marker-icon-2x-red.png

时，浏览器错误控制台会说什么？还要注意的是，它们没有为自定义标记定义任何

iconRetinaUrl

，我不确定是否有返回到默认标记的方法。@scai我添加了

iconRetinaUrl

选项，但结果是相同的。浏览器控制台中完全没有错误。简单的白色矩形，没有任何错误。它就像一个魅力！非常感谢你。你能更详细地描述一下为什么

L.icon

有效而

L.divIcon

无效吗？添加了更多详细信息