Как показать маркеры Leaflet в Angular?

Question

Я пользуюсь листовкой, и после долгих исследований мне все еще не удается показать маркер на моей карте.

Я перепробовал все решения, которые мог там найти.Даже угловой обходной путь, предложенный Leaflet.На данный момент мне удалось получить маркер img с правильным путем для рендеринга в HTML, хотя он все еще не показывает изображение.Другими словами, я получаю правильный путь, он находит изображение, я вижу все это в консоли, но затем говорит, что не может загрузить изображение, что довольно вводит в заблуждение, потому что с изображением определенно нет ничего плохого

ниже мой код:

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

ниже - консоль визуализированного html в браузере с правильным путем и всем:

<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;">

Я просто хотел, чтобы этот маркер появился!Без маркеров весь мой проект бесполезен.

Answer 1

Вам необходимо передать значок объекта, который определит путь для изображения маркера, например:

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'
   })
};

, а затем const marker = L.marker([51.5, -0.09], this.icon).addTo(map);

Нет необходимости включать изображение маркера впапка assets, потому что она уже включена в пакет Leaflet.

Вот рабочая демонстрация с маркером и всплывающим окном с использованием последней угловой версии.