Comment puis-je définir l'icône du marqueur personnalisé pour ma carte de prospectus avec NUXT.js ?

Question

J'essaie de modifier l'icône d'un marqueur distinct sur mon 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]
    })
  }

La première fonction fonctionne bien avec des chemins comme '@/...' mais la deuxième - non.

Le marqueur par défaut fonctionne bien :

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

mais si j'essaie d'utiliser un marqueur personnalisé :

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

Je vois un carré blanc

Answer 1

Vous instanciez une Leaflet DivIcon alors que vous passez des options applicables à une Leaflet Icon.

Utilisez L.icon au lieu de L.divIcon dans ce cas.

L'icône attend l'option iconUrl (et autre *Url) pour placer l'image correspondante sur la carte.

Le DivIcon ne place pas une image mais un élément div HTML nu, de sorte que vous pouvez le remplir avec un contenu HTML arbitraire. Par défaut, il est stylisé comme un carré blanc avec une bordure noire.