如何在 Angular 中显示传单标记？

Question

I am using leaflet and after a lot of research i still cannot get my marker to show on my map.

I tried all the solutions I could find out there. Even the the angular workaround suggested by Leaflet. For now I managed to get the marker img, with the right path to render into the html, tho it still doesn't show the image. In other words, I get the right path, it finds the image, I can see all that in the console, but then says cannot load image, which is rather misleading because there is definitely nothing wrong with the image

below is my code:

let markerIcon = L.icon({ iconUrl: 'src/assests/icons/marker.png'});
L.marker([48.208, 16.373], {
      icon: markerIcon,
      riseOnHover: true
}).addTo(map);

below is the console of the rendered html in the browser with the correct path and everything:

<img src="src/assests/icons/marker.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="" tabindex="0" style="transform: translate3d(659px, 207px, 0px); z-index: 207;">

I just wanted that marker to show up! Without markers my whole project is useless.

Answer 1

You need to pass an icon object which will define the path for the marker image like this:

icon = {
    icon: L.icon({
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 0 ],
      // specify the path here
      iconUrl: './node_modules/leaflet/dist/images/marker-icon.png',
      shadowUrl: './node_modules/leaflet/dist/images/marker-shadow.png'
   })
};

and then const marker = L.marker([51.5, -0.09], this.icon).addTo(map);

No need to include the marker's image on the assets folder because it is already included in the Leaflet package.

Here is a working demo with a marker and a popup using latest angular version.