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

Question

我正在使用传单，经过大量研究后我仍然无法让我的标记显示在我的地图上。

我尝试了所有可以找到的解决方案。即使是 Leaflet 建议的 angular 解决方法。现在我设法获得了标记 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);

无需将标记的图像包含在资产文件夹中，因为它已包含在 Leaflet 包中。

这是一个 working demo，带有标记和使用最新 angular 版本的弹出窗口。

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

How to show Leaflet markers in Angular?

markers

leaflet

typescript

angular