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

Question

I am trying to change marker icon for separate marker on my 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]
    })
  }

First function works fine with paths like '@/...' , but the 2nd one - no.

Default marker works fine:

L.marker([marker.lat, marker.lng]).addTo(_context.map)

but if I try to use custom marker:

L.marker([marker.lat, marker.lng], {icon: this.getMarkerIcon(L, "red")}).addTo(_context.map)

I see a white square

Answer 1

You instantiate a Leaflet DivIcon whereas you pass options applicable for a Leaflet Icon.

Use L.icon instead of L.divIcon in that case.

The Icon expects the iconUrl (and other *Url) option to place the corresponding image on the map.

The DivIcon does not place an image but a bare HTML div element, so that you can fill it with arbitrary HTML content. By default it is styled as a white square with black border.