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

Question

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

我尝试了所有能找到的解决方案。甚至是 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 benchmark = L.marker([51.5, -0.09], this.icon).addTo(map);

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

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