How to show Leaflet markers in Angular?
我正在使用传单，经过大量研究，我仍然无法在地图上显示标记。
我尝试了所有可以找到的解决方案。甚至Leaflet建议的angular解决方法。现在，我设法获得了标记img，并带有正确的路径以呈现到html中，但它仍然不显示图像。换句话说，我找到了正确的路径，找到了图像，可以在控制台中看到所有内容，但是然后说无法加载图像，这颇具误导性，因为图像
绝对没有问题。
下面是我的代码：
1 2 3 4 5 | let markerIcon = L.icon({ iconUrl: 'src/assests/icons/marker.png'}); L.marker([48.208, 16.373], { icon: markerIcon, riseOnHover: true }).addTo(map); |
下面是具有正确路径和所有内容的浏览器中呈现的html的控制台：
1 | <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;"> |
我只是想显示那个标记！没有标记，我的整个项目将毫无用处。
您需要传递一个图标对象，该对象将定义标记图像的路径，如下所示：
1 2 3 4 5 6 7 8 9 | 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' }) }; |
，然后
无需在资产文件夹中包含标记的图像，因为它已经包含在Leaflet包中。
这是一个工作的演示，带有标记和使用最新angular版本的弹出窗口。