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

Question

我正在尝试更改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)

我看到一个白色正方形

Answer 1

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

在这种情况下，请使用L.icon代替L.divIcon。

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

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